Skip to content

24 ways to impress your friends

Vote up?

Nik Coughlin

I came up with something very similar about a year ago, except allowing for differing column heights by using a seperate element for the backgrounds:

My old 3 column equal height positioned layout

The backgrounds are always the same height as the longest column because they are positioned against the wrapper element.

However, your excellent article inspired me to update it slightly:

Newer 3 column equal height positioned layout, redux via 24 ways

The changes I took from your article were mainly cosmetic but I also changed my handling of IE6 from my homemade CSS expressions to using the IE7 js. I also changed from 100% layout to fixed-but-flexible width.

A variation on this technique can also be used for skinning elements, ie for custom rounded boxes with alpha, drop shadows etc.:
Using positioning technique for skinning

You can also combine the two. I have an example of this somewhere but I can’t seem to find it at the moment :(