Skip navigation
Tyssen Design — Brisbane Freelance Web Developer
(07) 3300 3303

Why won’t faux columns work?

By John Faulds /

One of the easiest methods of giving your site the appearance of the columns being the same height is to used the Faux Columns technique as first outlined by Dan Cederholm on A List Apart.

While the method is simple, unfortunately, many newcomers to CSS have trouble getting it right at first. And the reason is nearly always the same: they've tried applying their background image to just one of their columns, rather than applying it to the containing element for all their columns.

You need to think in terms of creating a background image for your whole site (which can include its borders). You could create a background image 800 pixels wide by 600 pixels high (although with the ability to repeat images, you only need to create one say 10 pixels tall and then repeat it vertically) and then you place your columns over the top of your background image similar to if you were using tracing paper.

So, to sum up:

  1. your background image needs to be the full width of your layout
  2. it needs to be attached to the containing element of your layout