Skip to content

Tyssen Design — Brisbane Tyssen Design logo

[email protected] (07) 3300 3303

Why won’t faux columns work?

By /

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

Like to say hello? Give us a call on (07) 3300 3303, send us an email to enquiries@tyssendesign.com.au, or a message by filling in the form below.