Three Column CSS Design

I've been thinking about how to effect a three-column CSS layout that centers in the browser window and plays well with the major browsers both now and in the future. Currently, my DesignerJones site is built with fixed-position divs (z-index); it looks fine at 800×600, but any higher resolution finds it smack against the left side of the screen (except for the margin built into the design). And, the thing is, I like pretty much pixel-perfect rendition across browsers.

With a nod towards the Single Best Rule Noone Told Me thread at Cre8asite and to Adrian, who always makes me think, it's easy enough to get side-by-side divs to align properly. For this, I generally encase the divs in an overall div (especially since I tend to go with fixed-width) that gives us an outer container against wish we can position inner divs. A little margin:auto centers the outer div. Good enough.

But the problem with three-column layouts is that you'd think that you could float one right, one left, and let the one in the middle alone. This one can leave you thinking "good luck to me" in the middle of the night. You can start with glish.com's The Holy Grail — but here they've used fixed positioning; outer columns are fixed width while the middle column expands to fill the screen. Good, but that layout isn't always what one had in mind. A second Glish solution gives us three float:left columns, which again can get weird depending on browser width and browser version.

What I'm thinking is a tiny bit of a hack, but still far more elegant than cementing columns into tables or just letting browsers do whatever they may. Given that DesignerJones has content in the left column with two "navigation" columns to the right:

<div outer — fixed width, margin:auto>

<div content — fixed width, float:left> content </div>

<div nav container — fixed width, float:right>
<div left nav — fixed width, float:left> stuff</div>
<div right nav — fixed width, float:right> stuff</div>
</div>

</div>

I haven't tried this yet, but it *ought* to work.

Of course, the the text in the two right columns of DesignerJones starts higher on the "page" and actually overlays the one-piece top banner image via fixed positioning. Thus, to pull this one off, I'd have to cut the banner into three pieces, use the respective pieces as a background fixed at the top of the column, and then mess with padding in order not to have text run visually into the borders. While this may end up being easy, the idea gives me pause. Still, it will be worth it to be able to center DesignerJones, if I do it.