Any Column Longest

From CSS Discuss

Jump to: navigation, search


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:


(most of which predate the eponymous article)


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


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

Javascript solutions

Personal tools