Any Column Longest
From CSS Discuss
Contents |
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:
- 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
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
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
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 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
- WYSISWYG
