Advanced CSS

If you have any questions about the following examples please contact Scott. All the CSS necesary to accomplish the examples below are written internally. The external stylesheet attached to this page is only used for decorative purposes and the page can function without it.

Liquid Distribution of Space between images.

How to evenly spread images across a page so that even if the window is resized, the images continue to be evenly distributed?

 

Demo Image
Demo Image
Demo Image

Example of the CSS being applied to the above holder div's:

This document has three basic parts to it's CSS. The three div#holder's have an image within each. By using a width of 33% the three holders they span across the undertermined space (100% of the space divided by 3 images is 33%, if you had 4 images it would be 25%, 5 would be 20%, etc.), a center aligned type block makes the images sit in the center of each of those 1/3 intervals and the float left allows the three div#holder's to sit side by side.

View the source code to read the CSS used as well as the structure.

A Horizontal Scroll bar

Using CSS and div tags to create a horizontal scrolling gallery.

Demo Image #1
Demo Image
Demo Image
Demo Image

Here is where the text goes. It has text here and the text is absolutely magical. Magical text to allow for testing magical purposes and make absolute magic happenwith text.

Demo Image #5
Demo Image
Demo Image
Demo Image
Demo Image
Demo Image #10

This technique employs a clever use of oddly sized div tags. It's technique is simple and effective if done right. Using three main sections, what I've named the 'content2' div, a 'widthwedge2' div and the 'holder2' div's for the images to sit in. Basically it works like this: