CSS: Layout Packs:

I thought I would take a crack at a couple of common multi-column fluid-width layout styles that are notoriously quirky with CSS.

One way to accomplish a multi-column fluid layout is to set the columns with percentages. For example, floating a left column that is 19% wide and a right column that is 80% wide (keeping it under 100 prevents them from knocking into each other and knocking down). I really dislike doing it this way. It prevents you from doing pixel-based padding on those columns (problematic), leading toward extra div's. Even worse, the "gutter" between those two columns grows and shrinks, so at the browser windows narrowest, 1% is too narrow, and at it's widest, it is too wide.

A far better fluid-width technique (assuming you are comfortable with only one of your columns being the "fluid" one) is to not rely on percentages at all, but rather min and max widths on a single column. In fact, that single column isn't really a column at all, but the entire width of the layout. The content inside can be pushed away from the edges with padding, making room for absolutely positioned sidebars.

This technique is littered with juicy advantages:

• No floats mean a much less fragile layout. No worries about columns expanding and breaking from the content they contain
• Gutters between columns can be controlled consistently
• Pixel-based in general, allowing pixel based padding/margins

For a very nice write up of the theories at work here, check out Dan Rubin'sAbsolute Columns. These are very similar, only with the idea extended for fluid width.