divs and height problems

[darknailblue]

Hey all! I am running into a problem and am wondering how to solve it!! Basically what I am trying to accomplish is creating a layout that has 4 columns inside of a wrapper div. What I want is for ALL of these columns to be the same height based on the column that has the longest vertical content. Is that even possible? I know that this can be accomplished with tables, but with tables you can't make changes to over 600 pages very quickly! We are still in alpha test with our site and many revisions will be made. Here an example of what I am talking about.


Wrong:
¦---¦---------¦---¦
¦...¦.hi,.....¦...¦
¦...¦.this....¦...¦
¦...¦.is......¦...¦
¦---¦.content ¦---¦
....¦.blah....¦....
....¦.blah....¦....
....¦---------¦....


Good:
¦---¦---------¦---¦
¦...¦.hi,.....¦...¦
¦...¦.this....¦...¦
¦...¦.is......¦...¦
¦...¦.content.¦...¦
¦...¦.blah....¦...¦
¦...¦.blah....¦...¦
¦---¦---------¦---¦

See what I mean? I've searched the forums and have found no answer yet.

[Ferro]

I'd like to know this as well because I think it applies to stretchy 3 column layouts and stuff - I'd like to go one extra div inside the containing div containing the all the columns where the columns stretch to 100% of that div's height, which is determined by it's content - if you see what I mean.
I don't know whether this is actually possible though, would like to think so, but the problem for me seems to be that it's 100% of zero, until the content is put in, so the other columns don't show. I'm, probably still doing it wrong though

[Shadowfiend]

You can use Faux Columns to achieve a similar effect, but you have to be aware of which column is the tallest. Someone posted a Javascript solution, as well, but I've never been a fan of relying on JS to make a layout work, since that means it'll break on non-JS browsers. There's also an article at A List Part about three-column layouts. In general, though, like I said, these all rely either on invisible columns (i.e., columns with no background) or on one column being taller than the others.

[mlseim]

Yes, this is a problem with the current CSS.

Do you have a link to an example of one page with
uneven columns? I'm wondering if there's a way you
could change the background colors, borders, etc. to
give the illusion that they are all the same height.

Sort of a "psuedo" or "hybrid" faux column thing.

If we could see one of your pages (or create an example),
that might trigger some ideas.