If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

100% hight div w/ hight:auto parent?

Hi all! I'm trying hard not to use tables, but can't figure out how to do this w/ box modeling. I would like a div that is auto hight so that it stretches to accommodate the contents. Inside that div I need 3 divs, left column (auto height), right column (auto height), and a divider in the middle which is like a middle column. That middle divider needs to be 100% height of the parent div so that it stretches w/ it. Kind of like a table, you know.

I can't figure out how to do this. Everything I find on google tells me that for a div to be 100% height, height needs to be specified, either in percent or pixels on the parent div and all the way up to body/html. But I can't have that, the parent div needs to stretch and can't have a minimum height.

Here's my mini-example code. As you can see the middle/divider column's got a non-existant height.

set parent div to overflow: hidden, then in child divs you can set padding-bottom: 5000px margin-bottom: -5000px and then all child divs will be the height of the parent. Of course this wont work if you are trying to put content in the parent div (outside of other divs that is)

Is this the only way to do this? What happens if the parent div grows to be more then 5000px hight? It might do that, because in my app one of the columns could contain an actual essay, it can span multiple printed pages. Setting an actual max height is not a good idea.

There's 2 reasons:
The code I posted just used a plane color because it's a simple example, I was originally going to use an image (gradient). The document should conform to CSS 2 specifications, so I can't use the CSS 3 image border thing.

The 2nd reason is this: even if I were to just give up on the gradient divider and use solid color, which column's border should I use? If I use the right column's border, what if the left column is longer? Then the border won't stretch all the way down and will only go the length of the right column. And vice versa. If I use both column's border it's going to be 1/2 width for a segment where one column is longer then the other.

I also can't use javascript to figure out which column is longer, because FlyingSaucer PDF generator does not evaluate javascript, it just does HTML and CSS 2.

Is there a way I can use display: table properties somehow for this? I tried and they didn't do anything, but maybe I was doing it wrong or something.