Any Column Longest
From CSS Discuss
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:
- Apply overflow: hidden to the container element
- Apply padding-bottom: 10000px to the column blocks
- Apply margin-bottom: -10000px to the column blocks
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 (I Love Jack Daniels) - liquid column widths
- Liquid Bleach - Douglas Bowman (Stopdesign) - liquid column widths
(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
Douglas Livingstone pioneered an alternative method using borders on the wrapping elements and negative margins rather than background images
Layouts with relative (aka elastic) column widths:
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).
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
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 Cleva Treva Designs MK3
Neuroticweb developed a faux-columns based generator that will even produce a downloadable image based on your settings.
Neuroticweb 3 column layout generator
Pagecolumn developed an online tool to generate 1, 2, 3 column layout webpages which allow you to:
- drag the sliders to adjust the widths of the column
- use the color palette to change the color of each portion