Any Column Longest

From CSS Discuss

Jump to: navigation, search

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:


Examples:

(most of which predate the eponymous article)


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


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


Javascript solutions

Personal tools