CODEWITHSUNDEEP
javascripthtmlcss
Pathos
Pathos

Reputation: 399

Size of div depending on size of another div

I got a div which contains 2 other divs. They are vertically aligned. Now, the lower div is changing its size via javascript. What I want now is that the upper div is changing its size depending on the other divs size. Is there a way to do this with css style only, without using js?

UPDATE: The outer div has a fixed size.

<div>
 <div> childdiv 1</div>
 <div> childdiv 2</div>
</div>

UPDATE: Ok I didnt make this clear enough, the lower box is changing its height in top direction. And the upper div should then decrease its height.

Upvotes: 1

Views: 4145

Answers (4)

Simon
Simon

Reputation: 3539

You could use display:table and display:table-row to change the height of the upper div accordingly, so that the total height matches the fixed height of the container:

#outer{
   display:table;
   height:200px;
   width:200px;
}

#inner1{
    background-color:red;
    display:table-row;
}

#inner2{
    background-color:green;
    display:table-row;
    height:30px;
}

You'll find an example here: http://jsfiddle.net/bRg6m/

Is this what you want?

Added: Note that this doesn't work in IE7 or older. You'll have to use a Javascript solution if you want to support those browsers.

Upvotes: 2

musefan
musefan

Reputation: 48415

Really depends on your setup. The easiest way by far would be to just apply the javascript code to both DIVs at the same time.

Setting the width of the first DIV to be 100% should cause it to resize the width to match the second DIV (as the resize will force the parent DIV to increase in width too), but you will have a problem when trying to get the height to match, as with pure CSS the first DIV will have no reference to recalculate its own height to match.

Example Here

Alternatively, instead of making the second DIV resize you could resize the parent DIV and have both children set with CSS as follows:

width:100%;
height:50%;

Upvotes: 0

ssdesign
ssdesign

Reputation: 2821

Possibly this is what I meant:

document.getElementById("upperDiv").style.width = document.getElementById("bottomDiv").style.width

Upvotes: 0

Filip
Filip

Reputation: 2522

I'm not sure I understand your question. I made an example here where the upper div is changing its width depending on the lower divs size. Is that what you needed?

http://jsfiddle.net/8fwXR/

HTML

<div id="wrapper">
    <div id="box1"></div>
    <div id="box2"></div>
</div>

CSS

#wrapper {
    float: left;
}

#box1 {
    background: red;
    height: 100px;
    width: 100%;
}

#box2 {
    background: green;
    height: 100px;
    width: 400px;
}

Upvotes: 2

Related Questions