I adapted a technique from the latest issue of A List Apart: the Holy Grail of three-column CSS layouts. The idea is to do a three-column layout with two fixed with columns on the outside and a variable-width column in the middle taking up the rest of the horizontal space, all without unnecessary, non-semantic markup and keeping the center column first in the markup.
I implemented it on this blog, with the tweak that I wanted my right column to be variable width, too. This is straightforward to do, by setting the center column to less than 100% of the width, and then setting the right column’s width to the remainder. Since the right column is now floating left as normal, it no longer needs its margin adjusted. Finally, the left column’s margin left is set to the same width as the center column.
Still haven’t sorted things out on IE. I have my ThinkPad home from work, so maybe this weekend I’ll get a chance to poke it into a semblance of presentability.
