2.5 Equal Height Columns

Equal Columns

When web designers used to use tables to control layout, equal height columns were never a problem. Using the common 3 column page layout with header and footer as an example (see Web Page Layouts), all columns would be equal height regardless of the differing amount of content contained within them, and they were easy to extend to use the full height of the screen too, both of which gave a pleasing appearance when using different background colours (or images) for each column. However, the first thing web designers noticed when using CSS to control layout was that this simply wasn't the case.

Unequal Columns

The columns, in this case container divs, would only extend as far as the content contained within, which could look awful - especially if each column had a different background colour. Searching for an answer to this problem that worked across all browsers became a little like searching for the holy grail, and even after a lot of Internet searching, some of the suggestions and code snippets offered simply didn't work when applied to real web pages. Some meant extensive changes were required to the structure of the html pages rather than just the stylesheet, and so weren't ideal, and what was needed was a pure CSS solution.

First, it is important to note the subtle difference between equal height columns and full height columns:

  • Equal height columns mean just that; the columns are all equal height, regardless of the amount of content
  • Full height columns are those that make use of the full height of the viewport

It may seem purile to highlight such a subtle difference, but then many a designer has spent hours searching for a full height column solution, only to realise they already have that and what they really need is an equal height column solution. Full height columns will extend to the bottom of the viewport, but after scrolling past that, they won't necessarily be equal in height if the contents are different lengths.

Unfortunately, a pure cross-browser bug-free CSS solution for this still doesn't seem to exist. Without resorting to using Javascript or tags that aren't supported in all browsers (such as display:table), the 3 best methods I can find are:

  • Faux Columns
  • Negative Bottom Margin trick
  • Companion Containers

These are discussed in detail over the next few pages.