CSS, auto resize div?

Question

I'm trying to design a layout with css, I got one main container(div) and two inner container(div_upper and div_lower). let say I want to resize div_upper and div_lower will automatically resize itself and both divs still fit in the main container. I'm sure this can be done in javascript, but is there any CSS to accomplish this? if so I would be glade.

Answer 1

Maybe this blogpost on the A List Apart website will help you in the right directions.

Answer 2

You could just not specify a height on the inner divs and set it to

div {
overflow: visible
}

They should resize. On the other hand, if you have the inner divs floated to left and right and they have a background image, you can use faux columns for that, as detailed in this post by A List Apart.

Answer 3

Anoother solution:

Use this class for getting auto vertical height -

.getAutoHeight {
   position: relative;
   overflow: auto;
}

<div class="getAutoHeight ">
    any content<br />
    any content<br />
    any content<br />
    any content<br />
</div>