laneys.info Beware of Yankees, drunks, and loose women.

Matthew Levine wrote this technique up for A List Apart on January 30, 2006.  The original article goes into much greater detail and is definitely worth reading.  This is just the shorthand information to jog my failing memory.

This technique works for all modern browsers (as of February 1, 2006).  Internet Explorer 5.5 and other, older browsers should just give up now.  There are also rumors that IE 7 won't work (when it's released), because it no longer supports the * nomenclature that enables the IE hack in the CSS.

The layout features three columns - two fixed-width sidebars for navigation, advertising, or a help panel and a fluid center for the main information.  Many articles and templates already exist to do this, but usually involve sacrificing one or more good design principles such as proper source order, full-width footers, or lean markup.

This technique works equally well for any unit of measure (e.g., em), not just px.

The following is stolen referenced verbatim from the article.

The required HTML is intuitive and elegant.

(For the sake of clarity in demonstrating this technique, we are intentionally using the non-semantic ids "center," "left," and "right." We recommend you use semantic ids in any application of this technique. —Ed.)

<div id="header"></div>
<div id="container">
    <div id="center" class="column"></div>
    <div id="left" class="column"></div>
    <div id="right" class="column"></div>
</div>
<div id="footer"></div>

That’s it. A single extra div to contain the columns is all that you need; this satisfies even my obsessive compulsive markup habits.

The stylesheet is almost as simple. Let’s say you want to have a left column with a fixed width of 200 pixels and a right column with a fixed width of 150 pixels. To simplify the comments, I’ll abbreviate the left, right, and center columns as LC, RC, and CC, respectively. The essential CSS is here:

body {
    min-width: 550px;      /* (2 x LC width) + RC width */
}
#container {
    padding-left: 200px;   /* LC width */
    padding-right: 150px;  /* RC width */
}
#container .column {
    position: relative;
    float: left;
}
#center {
    width: 100%;
}
#left {
    width: 200px;          /* LC width */
    right: 200px;          /* LC width */
    margin-left: -100%;
}
#right {
    width: 150px;          /* RC width */
    margin-right: -150px;  /* RC width */
}
#footer {
    clear: both;
}
/*** IE6 Fix ***/
* html #left {
    left: 150px;           /* RC width */
}

Simply replace the values with your desired dimensions and the grail is yours. The technique works in all modern browsers: Safari, Opera, Firefox, and (with the single-rule hack at the bottom) IE6. IE5.5 support would require at least a box-model hack, which is left as an exercise to the reader.

Take a look and marvel at the elegance.