Multi-Column CSS Layouts for Slackers

You don't need a crazy CSS framework to make multi-column CSS layouts easy. They already *are* easy.

If you feel skeptical about my claim, I don't blame you. Like many web developers I too have tried to create 3 column layouts using the various types witchcraft found on web developer blogs:

• The byzantine two column layout wrapped within a two column layout technique
• The arcane negative margin trick
• The absolutely positioned nightmare
• The include a different CSS file for every browser, or else challenge (this one feels like a game sometimes...)
• ...and a variety of crude negative-margin + absolute-nightmare + nested-2-columns-within-two-columns combos

I'll call this technique the "float everything and clear" approach. I don't claim to have invented it, its just the way I've learned to do it over 4 years.

It works predictably in Safari, Firefox, IE7, IE6. It belly laughs at the the task of switching from a 4 column, to 3 column to 2 column layout. ITS NO FUSS! It contains no hacks, no browser specific code, no positioning, no negative margins. Just give your columns a width, make sure they add up to the total width of the container, and move on.

Here's a demo, and explanation. The demo demonstrates the the technique with 4 layouts: 2 column left, 2 column right, 3 column, and 4 column. It also demonstrates those 4 layouts surviving fluid width, 1000px, 800px, 600px respectively. The demo site files are attached at the bottom. Enjoy.