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

Related Articles

CSS and Seperation of Concern

There is an old wisdom in computer engineering that software should be divided into independent components. This is called a separation of concern principle. This principle should be practiced when...

WordPress CMS

WordPress is an extremely popular CMS solution. It allows to quickly create a simple website with static pages and/or periodically published articles. It's the type of website that a typical...

Hide Button Text

There is a simple, but genius, method to replace button with icon. I learned it from jQuery. First, create the button, as you would always do. You can use <button>...