Tutorials on CSS columns

Create the look of columns using the float, width and margin properties.

The Practice of CSS Column Design: Boxes in Columns

Creating a grid to hang various elements on.

An elastic layout with two columns of equal height, each with a different background color.

Use as many columns on a page as you like. (although it gets difficult quickly & relies heavily on percentages, which the various browsers all calculate differently. Reduces markup for removing borders and using different background colors for your columns.

A fluid layout which has all the CSS needed to create one, two, three or four column layouts.

Re-visiting faux columns to offer a CSS cross-browser solution. This method to make all columns appear to be the same height, but without the need for faux column style background images.

Creating liquid faux columns using the sliding doors and fixed faux columns techniques.

Zoe Gillenwater's article on creating equal height columns in liquid layouts with coloured backgrounds - aka faux columns. The example includes two and three column layouts.

Faux Columns for Liquid Layouts give a clearoverview on how to produce faux columkns with background images. Fu2k.org - 3 column NN4 has a Netscape Navigator 4 ready example of faux columns with background images.

Uses JQuery to equalize all column when their IDs are specified. On Font Resize is also needed to cope with changing font sizes. Paulbellows.com - Balance Columns with JavaScript has a JavaScript method to balance your CSS Columns. Bonrouge.com - JScript Equal height columns also uses javascript to find out which div is the longest and then sets the others to be the same length.