CSS Column Layout

When working on websites, one of the most common patterns is column-layout. You want have some main content flow in the center of the page, and have one or two columns on the side.

There are many, many solutions for this job. However, I believe that only few of them are “right” solutions. A right solution must be:

• CSS based
• agnostic to column order in HTML

Bellow are two of my favorite CSS column layout. They both work well on a fluid-width website and make heavy use of float property. Of cause, they are easy to use on fixed-width website as well.

Download both solutions.

Column Layout 1

Sidebars have fixed width and main column takes up the rest of the available space.

Demo

Column Layout 2

All columns have a known width.

Demo