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

I think you want to display same height of both DIV2 and DIV3. By CSS you can do it as below:

HTML

<div class="wrapper">
    <div class="child_1">First Div content goes here</div>
    <div class="child_2">Second Div content goes here</div>
</div>

CSS

.wrapper {
        width: 960px;
        overflow: hidden;
        margin: 0px auto;
    }

    .child_1, .child_2 {
        padding-bottom: 1000px;
        margin-bottom: -1000px;
        width: 50%;
        float: left;
    }

    .child_1 {
        background: #f00;
    }

    .child_2 {
        background: #0f0;
    }

Code above will display your div height's equal if they have 1000px different in height as per code. you can change 1000px, if you think in some case difference could be more. It'll support in all browsers

Other wise you can use javascript for it. You need to find height of longest div and set same height in other div.

Answer 2

Try using the CSS attribute display: table-cell. See this jsFiddle.

EDIT

Using floats, try this updated jsFiddle
Or equally this one. Both provide an elegant solution.

Answer 3

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:

<div class="div1">
    <div class="div2"></div>
    <div class="div3"></div>
</div>

CSS:

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

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