...and now we come to what A List Apart calls "the Holy Grail" of layouts - the fluid 3-column layout. This is my version, brought upon by a request made on a message board for a 3-column layout where the designer could vertically center-align the sidebar content. Amazingly, I got it to work for her - but it didn't work in anything but Firefox and IE6 (that's all she was worried about, so I stopped there). However, I became obsessed with trying to figure out a way to accomplish the 3 column layout in a way that was better than anything I'd found. After reading the A List Apart article, and a few others, I put my mind to it and came up with the below tutorial. Now, personally, my favorite way to do a multi-column layout is to add in background gif images for the column backgrounds. Why do I like this style? I don't know. I guess I like the option of putting in a cool tiled background, if I really want it, rather than a solid color. Of course, there are drawbacks - the only one I can think of off the top of my head is if someone comes to the site with images turned off - but in a case like that, I believe if you can see the content, then all is well (since most people who have images turned off just want to see the content anyway!) However, to do it in a 2 column layout is easy. But a 3-column? With the center fluid? How could it be possible?

Now, we come across a trick I ran into this morning. Someone had asked about a CSS-based rollover image swap for a site. You've seen these rollovers before - usually implementing javascript (I believe Dreamweaver even has this kind of function built in? I don't know for sure - I don't use it!) - usually for navigational purposes. Basically, the end user comes to the site, hovers over your link and the image swaps out to something that "highlights" the users choice. The thing is, when you use CSS for this type of thing, there has to be something between the <a> and </a> tags to trigger the image swap. Simply setting the CSS to swap out the background on hover seems like it should work, but it won't - simply because there's nothing in the HTML to tell the browser that it is being hovered over. So, how do we get around this?

The Two Column Layout is the most popular of layouts I've done in the past. This site is even done in the two-column layout - it seems to be the most popular for simple websites. One column - narrow in width, is usually reserved for the sidebar navigation, the secondary column is wider and handles the content of the pages. An example to view - aside from the page you're looking at right now: Basic, basic basic. Now, you can do without the header and /or footer quite easily - but the technique I'm going to describe is for the example layout above - and done entirely in CSS. That's right - no tables.