3 Equal-Height Columns CSS Liquid Layout

Found a couple techniques that work with le Fox, but they don’t hold up in IE. Before I set off yet again, I thought maybe someone had some advices!

I always fall back to this: http://www.cssplay.co.uk/layouts/3cols2.html

I’ll stick with that one I think. I’ve sort of got it working, I like it’s recursiveness and it’s pretty lightweight code. I tried three separate times (I’m putting it in a WP child, all php function calls to get pages and it calls the two sidebars simultaneously, had to separate them)

Anyway, for some reason every single time, and I’m not exactly sure when, I’m exceptionally careful about migrating my site into the setup (right down to using your class and id names), if my right col is the longest, the footer is into it’s padding and I lose my centering. No biggie, I’m just gonna justify my footer left for now. This is irking me fiercely, and I’d be totally lost without firebug to analyze the rendered page (which is composed of like 4 different files or something gross).

It’s all good and then falls apart again in IE when I try to wrap the entire site, another thing I’m going to back burner. I just want to get this functional and up before I start obsessing really hard!


If you are using the 100% height method then you won’t be able to wrap another wrapper because you can’t base another nested element on an element that is min-height:100%. Only one element can ever carry the full height because nested elements will collapse to height:auto. You can’t use height:100% afain either because that means that the element can never grow. Read the faq on 100% height if I didn’t make that clear enough :slight_smile:

This is quite quite tricky as everything has to be done on that one element.

If you want some help debugging the problem then we’d need to see the code or a link etc. If the footer overlaps then it will be a logic error somewhere and shouldn’t be too hard to spot.

I’ve had these lying around for years but if you want three fluid columns


I have loads of these scattered around the place.:slight_smile:


your question is too short and incomplete to picture what ur askng but i guess ur 3 column are not coming equal in IE compared to FF, try giving ur div (he columns height)

Is your objection because of the lack of support for IE mac?

Oh my clorets, that’s the lightest weight code I’ve seen yet, and more importantly it doesn’t go straight to hell in IE7.
I haven’t taken a good look yet, but it looks great so far!

edit - no IE7 PC. It’s surprising how many of the techniques don’t hold in IE7

edit-edit- The thing about Paul’s is it has the added bonus of a minimum heightof 100% as well.

It’s hard to explain, and I don’t wanna do a pic. Like this - http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm

No fixed height, columns are liquid horizontally and vertically.

Nice one PMOB, ALA and many others failed me here.