Archives » July 16th, 2005

July 16, 2005

The Future is Not Yet Here

Somewhere inside of me, there is a little CSS purist writhing and screaming in pain. For you see, for the last couple of weeks I’ve been working on the layout over at I settled on a really basic three-column layout, but souped it up a little behind the scenes so I could turn each sidebar on or off with a simple boolean variable on each page. I can change it to 2-column, or even 1-column, just by changing True to False in my code.

Anyway, I ran into the same problem that so many have when you’re putting together a 3-column layout in pure CSS: the page footer is usually glued to the bottom of the middle column, since the sidebars are both absolutely positioned. And that works fine for most pages, but what happens when the sidebars are longer than the center column? The footer ends up in the middle of the page, with the sidebars extending beneath it. We’ve all had it happen to us; it happens on this very weblog. Just look at one of the archive calendars.

There have been dozens of ideas on how to fix this problem, and they’re all very ugly, because they involve JavaScript or floats, and they all seem to negate the simplicity that you get from working with CSS. And so as much as it causes me pain to do it, I decided to go with a simple 3-column table for the site. This is the so-called “Transitional Layout”, or “Hybrid Layout” that everyone wishes we could avoid, but that everyone has to deal with sooner or later. And there’s nothing wrong with it, as Eric Meyer says in this interview. The real danger is when you get into heavily nested tables, and you’re using tables and spacer gifs to do things like margins. That’s when you’re headed down the wrong path. But if you need one table with three columns just so everything sticks together and the footer stays at the bottom of the page, well then you go right ahead and do it. And that’s what I’ve done.

And I’m definitely feeling the advantages of the modular approach too. My entire layout is done with include files, so to change from the not-so-great CSS layout to the tabled layout, I had to change about five files. The change took place on every page on the site. Includes rock.