Equal height columns? Using CSS? Mathematically impossible

Seven or eight experiments in web design later, here we are.

Okay, some of you may have been keeping up with the rapid changes here at qntm and some of you may have blinked and missed them. Anyway: I get bored with site designs after about six months and start tinkering with them. The problem is: I'm not so good at colour schemes. Lusting after the clean efficiency of the websites of certain corporations to which I have recently submitted job applications, I switched momentarily to a dark-blue-on-white kind of theme with reddish headers and the nice sidebar you see here picked out in subtle shades of blue. It was poorly received and, after going away for a while and coming back with a newcomer's perspective, I agreed. I wanted to try to make black text on a white background work - it's easier on the eye in my opinion, and looks more professional when you have a lot of text content - but the consensus was that I should stick with what worked.

So after a few false starts I eventually dug up the old colour schemes and reverted everything. Fine. I still had the breadcrumbs rolled into the sidebar as I'd wanted so I was happy.

But there was still one thing I wanted to do, a monster I've grappled with since time immemorial. To get rid of the tables! Everybody knows you're not supposed to use <table>s to lay out your web page; content should be entirely divorced from layout, that's the whole POINT of CSS. You're supposed to use <div>s - so that, without a stylesheet, or with a text-based browser, the page appears as flat text - and then apply all the positioning, formatting and colouring using the stylesheet. Fine. In principle.

Right, okay, so how do I do two columns? With the middle column appearing first in the markup and liquid, the sidebar appearing afterwards and fixed width?

Um, you can't.

Well, you can. You set them both to float and wield arcane hacks like negative margins, but it serves. Pretty much.

Great, so how do I get both columns the same height? Because if one column is longer than the other, the background colour comes through where it shouldn't.

You can't.

Seriously.

The SINGLE most basic, logical, obvious layout for a website ever conceived simply CANNOT be achieved using cascading stylesheets and <div>s. The thing is: you can set the height of one <div> to be 100% of the height of its container, so it fills all the space no problem. And you can give it a fixed height if that's what you want. But you CAN'T set it to be the same height as another <div> beside it.

Well, what if you change the background colour? Nope: sometimes the content is longer, sometimes the sidebar. Eventually, one of them will give the wrong colour of overflow.

Okay, obvious solution: put the sidebar INSIDE the main container, floating on the right. Nope! Because then the sidebar is first in the markup.

Fine: position it absolutely? No, then the main container has to be positioned absolutely as well.

You can go on and on and on like this, around and around in circles, tearing your hair out as you slowly discover that absolutely nothing works.

I think it may be possible to devise a mathematical proof that equal height columns are impossible, using circularity arguments (height of X depends on height of Y depends on height of X, which is impossible with CSS and <div>s), but I lack the willpower or patience to embark on it.

Eventually I found an ugly hack where you force both columns to be incredibly long (still unequal, but each one definitely longer than the content in the other), then trick the browser into hiding the overflow. You would hit problems with seriously long pages, but it works, right?

Nope. If you click an internal link on such a page, like I use to generate tables of contents here and here, the whole thing scrolls. Mad stuff happens and half the page disappears without trace.

Dismayed, I had to abandon my efforts.

There is no way to do column layouts without structural <tables>. Check the markup today and you will see this is what I have had to resort to. It's just one table, just a little one with two <td>s, but I am a beaten man.

At least, the site looks a little better now.

In other web design related news

I have been recently spending my time carefully sculpting and styling Everything2.com. E2 is still very Web 1.0 on first glance, however, behind the scenes, spanners are clanking and a mysterious new theme called "Zen" is being fabricated. Zen is all-singing, all-dancing, and I think I've come up with some pretty cool stuff in terms of possibilities. Register, log in and, in your user settings, switch to the Zen theme and then use my Kernel Blue stylesheet to see the difference.

Untold aeons from now, E2 will look awesome. I hope to be part of that!

Update

Zarquon! A method that actually works!