The problem:

You want all the columns to appear to be the same height but you can't guarantee which column of your layout will be the longest.

Solution A - padding excess / negative margin compensation / overflow:hidden cut

(Actually, there appears to be a show-stopping bug with this if an anchor is called within any of the columns causing the content of all the columns to shift upwards revealing empty space beneath - in short, stick with Faux Columns for now unless you can guarantee that you won't have any anchors)

[Equal Height Columns - Position is Everything] - pixel, em and percentage based widths, with no requirement for background images

In a nutshell, the technique works like this:

WARNING: this method does not work properly if you use anchors within the page.

Solution B - the orthodox way - faux columns:

Set the backgrounds for the columns by actually setting the background image of wrapper/containing elements.

Articles explaining the technique:

[Faux Columns - Dan Cederholm (A List Apart article)] - fixed column widths

[Two columns with color - Russ Weakley] - one fixed column width

[Liquid Faux Columns - Zoe Gillenwater (Community MX article)] - liquid column widths

[Faux Columns for Liquid Layouts - Dave Child (ILoveJackDaniels)] - liquid column widths

[Liquid Bleach - Douglas Bowman (Stopdesign)] - liquid column widths

Examples:

(most of which predate the eponymous article)

[Big John - Three Col Stretch] - partially liquid

[Big John - Three Col Equal Height Demo] partially liquid

[Alex Robinson - Ordered Float Model Equal Height Columns] - all liquid

[Alex Robinson - 3Col_NN4_RWS_C Equal Height Columns] - all or partially liquid

[Petr Stanicek - 3-col layout, no tables, no positioning, no hacks] - partially liquid

Alternative:

Douglas Livingstone pioneered an alternative method using borders on the wrapping elements and negative margins rather than background images

[Douglas Livingstone - Keeping it tall]

[Big John and Holly Bergevin - Ordered Borders Layout]

Layouts with relative (aka elastic) column widths:

[Ruthsarian Layouts - Skidoo : 3 Columns]

[Tonico Strasser - Flexible Layout]

Solution C - Display: table properties

Note that you can also use the CSS2 "display: table-cell" property, applied to DIVs. This method is very simple, but won't work in old browsers (such as IE6).

[CSS Display property]

Solution D - Columns with underlying solid presentational columns

[Perfect 3 column liquid layout: Pixel widths] [Em widths] [Percentage widths] [Equal Height Columns Explained - Tutorial]

[Ingo Chao - Companion Column Method]

[Paul O'Brien - How to Make Equal Columns in CSS]

[Ingo Chao - Column Swapping]

Solution E

(Huh? Sorry to be brutal, but can whoever added this, please tidy it up so it actually makes sense? And note that it's moved here so as not to be in between the introduction of faux columns and all the related examples. 17 May 2006)

Put a div wrapper element around all columns, then use relative positioning and set the children's height to 100%. In some cases, this does not give the desired result with MSIE - this can be worked around by setting the height to a fixed value of, say, 400px with an MSIE-only hack.

Online-Tools

Trevor Nelmes introduced a new online tool for creating three col layouts - even Big John said «Wow, Trevor!»

[CSS Variable Border 3 Columned Page Maker by ClevaTreva Designs MK3]

Neuroticweb developed a A faux-columns based generator that will even produce a downloadable image based on your settings

[Neuroticweb 3 column layout generatos ]

[2columns.net - generates layout with two columns with equal height ]

Pagecolumn developed an online tool to generate 1, 2, [3 column layout] webpages which allow you

Javascript solutions

[ProjectSeven]

[Exploring the Limits of CSS Layout - SitePoint article and Javascript]