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’s Absolute Columns. These are very similar, only with the idea extended for fluid width.

See the demos:

• Fixed, Fluid
• Fixed, Fluid, Fixed
• Fluid, Fixed
• Half and Half*

Download All

IE 6

I’m sure most of you immediately thought of all the problems with this in IE 6. We know darn well min/max width isn’t going to work in IE 6. And setting top/left/bottom or height: 100% for those sidebars isn’t going to work either. So what do we do?

There are a number of ways to deal with it, you just need to assess the exact situation on your own site to determine how. Maybe you don’t mind min-max width breaking (all that happens in IE 6 is that the max width is 100% and the min width is 0%). Maybe your sidebars aren’t different colors so you don’t care if they extend all the way to the bottom or not.

I think the most elegant solution to dealing with IE 6 (As Dan suggested in his Absolute Columns article) is the Dean Edwards IE7.js script. Just chuck this little nugget in the head section and your troubles are over:

<!--[if lt IE 7]>
    <script src="//ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

Testing

I’ve looked at these in IE 6 and up, and in all the other popular browsers I have installed and they worked in everything. If you guys find problems though, let me know and we can work on solutions.

*Half and Half makes use of percentages, not really in keeping with the theory of the other examples (but still potentially useful).