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                      .
. ---------   ------------------ .
. .       .   .                . .
. .  DIV2 .   .        DIV3    . .
. .       .   .                . .
. .       .   .                . .
. ---------   -----------------. .
.--------------------------------

score 3 · Answer 1 · answered Feb 16 '12 at 10:23

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/

answered Feb 16 '12 at 10:23

Andreas Eriksson

8,979
8
47
65

its a very nice solution, but what if I already use float:left, can I stay use it or I must re design ? – steve jobs Feb 16 '12 at 10:52

jacktheripper · Answer 2 · 2012-02-16T10:55:58.317

3

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.

edited Feb 16 '12 at 10:55

answered Feb 16 '12 at 10:27

jacktheripper

13,953
12
57
93

its a very nice solution, but what if I already use float:left, can I stay use it or I must re design ? – steve jobs Feb 16 '12 at 10:52
what if I want to make a div4 inside div3 and make it always on bottom ? – steve jobs Feb 16 '12 at 12:39

score 2 · Accepted Answer · answered Feb 16 '12 at 11:16

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.

Auto Div height depend on another one

3 Answers3

Linked