In web design, it’s called the holy grail: a three-column layout with a header on top and a footer on the bottom. (If you use your imagination, it looks sort of like a chalice, right? See the cat? See the cradle?)
(Warning: If at this point, you’re saying to yourself “And I give a rat’s ass… why?” then you’re going to be bored to tears by the rest of this post.)
And it’s precisely the kind of layout I’ve been using in a redesign for the amazing Donna Hall at Hot Diggity Dogs. This would be a piece of cake if I was laying the pages out using tables.
But as it turns out, it’s a surprisingly difficult thing to accomplish using Cascading Style Sheets, which is a layout standard that we’re all supposed to move to because Tables Are Bad (“the use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web,” according to these folks).
Fixing little problems with them is like playing whackamole. If the columns are aligning right, then they don’t extend all the way to the bottom. If they do extend all the way to the bottom, their background colours don’t show. And what works in one browser looks insanely horrible in another one.
I was on the verge of despair, checking out a few workarounds that would have required JavaScript, Flash and an ancient ritual involving my immortal soul and a virgin canteloupe (I think… the runes are a little fuzzy after 5,000 years). And then I found this guy.
He manages to more or less fake the background colours by placing huge borders on the left and right of the centre column (that’s “background colors” and “center column” for our American search engine buddies). It’s an elegant, ingenious little solution, and so far it’s working in every browser I’ve tried.
