Phone and FAX
Tel: 0845 121 1194
Fax: 0845 121 1195
Archives:
Meta:
Categories:
CSS Equal Height Columns - March 19th, 2008
One of the few advantages of table based website layouts is that makes it easy to create equal height columns. We all know though that tables should be used to display tabular data, not for layout. Creating equal height columns in CSS is a different story though:
In the past, to achieve equal height columns CSS based layouts we could use the CSS faux columns technique. Though it was satisfactory while lasted, this technique is actually quite cumbersome and lacks flexibility.
For example if you need to change the column widths, you also need to change the background images; if your layout is pixel-based you need to make some challenging calculations; you must create background images even when you just want to display a solid colour.
The CSS equal height column technique
There are only 4 basic steps to achieve this CSS layout:
- Wrap all columns in a container element
- Apply overflow: hidden to the container element
- Apply a rather large padding-bottom value to the column elements. I suggest 32767px which is the maximum supported by most browsers
- Apply negative margin-bottom value (-32767px in this example) to the column elements
The padding-bottom value pushes the column all the way to the bottom, the negative margin-bottom value brings it back up and the overflow: hidden in the container element removes the excess.
For further information about this technique namely, cross-browser compatibility, read Position is Everything.