Brandwidth Blog

In my years as a web designer, I’ve seen a just a few paradigm shifts in element use :). I remember back in the day when you’d throw together a site using tables for layout and all was well. Tables were simple (at design time), most every browser would render them right, and graphic design programs even would break up images into nice neat tables for web use. Going back to these sites for maintenance, however, was horrible. The glorious design that you were on top of at creation suddenly becomes this confusing mess of and tags that have you saying “what the crap was I doing here??”

In the new Web 2.0 world, the shift has been to using DIV tags and CSS for most of your layouts. One thing that I wanted to touch on that is very handy to do is using Divs to create a “table” layout of something like a list of images.

Here is how it works: You surround the image gallery in a container DIV so that it doesn’t interfere with the rest of the page. Then, you simply apply float styles to the DIVS that contain the images so they all line up nice and neat. Sounds simple huh? Actually it is with a bit of planning.

You need two CSS classes to do this. Let’s call them listitem and listend for this example.

listitem
{
     float:left;
}
listend
{
     float:left;
     clear:right;
}

The idea here is that you’re floating every “listitem” to the left, stacking the next element up on the right of the one previous. When you get to the end of the row, you use the listend style to float the element to the right of the previous, then clear the right side to make the next element render on the next line. Think of the listend class as a carriage return.

[listitem] [listitem] [listitem] [listend]
[listitem] [listitem] [listitem] [listend]
[listitem] …

Now let’s say you want to reorder the list (change dimensions). With a table layout, this usually involved re-creating the table because trying to split rows and elements would just take too long. This is not the case with our good friend the DIV. To reorder this list, all that is involved is moving the class definitions around, and you automatically get a different row/column configuration!

Indeed… DIV is your friend.

This entry was posted on Monday, October 8th, 2007 at 8:25 am and is filed under BW Bloggers, John Barlow. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.