Auto Div height depend on another one

Question

I have the following scenario I want Div2 height to resize depend on the content of Div3 how I can do that ?

----------------------------------
.      DIV1          


        

Answer 1

You could use the display: table-cell css property, though be warned, it's CSS3 and doesn't have a lot of support in anything older than IE8.

Example:

CSS:

.div1 {
    display: table;
}
.div1 > div {
    border: 1px solid #000;
    width: 200px;    
    display: table-cell;
}
.div3 {
    height: 500px;
}

Fiddle: http://jsfiddle.net/97NJR/