Equal div heights with 3-column layout

[frozenpeas]

Hello,

I am in the midst of developing this site

http://sp.frozen-peas.com/

and would like to have the three main columns of equal height, allowing for expanding content.

I have tried the faux columns method from ALA but that didn't work for my purposes. The method here (

http://www.devarticles.com/c/a/Web-Design-Standards/Matching-div-heights-with-CSS-and-JavaScript/3/)

looks interesting, but I cannot get it to work with my design.

What I need is for all three columns to fill down to the footer (as the green one does now). Actually, in Windows IE the green column doesn't quite reach the footer. So that's another thing I need to figure out.

Does anyone know of a way to accomplish this?

frozenpeas

 

[BillyRayPreachersSon]

Unfortunately, the URL you gave (

http://sp.frozen-peas.com/)

doesn't appear to work (

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[frozenpeas]

It works fine for me... maybe it was down for a bit.

frozenpeas

 

[Vragabond]

If all three columns have different background colors (like they do in the example) you won't be able to use faux columns approach. If they all have non-fixed heights, you cannot use an approach that involves no scripting. So, if all this is true, you should use the method you found and define the height of the columns later on with scripting. I have no idea why it shouldn't work for you, but if you show us your implementation of it, we might be able to help.

 

[frozenpeas]

http://sp.frozen-peas.com/

So far, I've been able to get the faux columns method to work. I'll see what kind of problems I run into. The only thing now is extra space above the footer in FF.

Thanks for taking a peek.

frozenpeas