# Expand Parent Div to Height of Child Divs

Page 1 of 1

## 7 Replies - 8497 Views - Last Post: 07 October 2012 - 11:12 PM

### #1 drodriguez

Reputation: 2
• Posts: 93
• Joined: 03-October 12

# Expand Parent Div to Height of Child Divs

Posted 07 October 2012 - 05:24 AM

Ok, I have been trying to solve this problem for about a week. I have searched around and tried several things but maybe this is a lot more simple than I am making it. I have a parent div called mbody and 2 more divs within that one called lbody and rbody that are equal width and are next to each other. I want the mbody div to expand downwards as the inner divs expand due to content. The following has not been working for me. Anyone know what I am doing wrong?

HTML

<html>
<title>Im Confused</title>

<body>

<div id="mbody">
<div id="lbody">
test text test text test text test text test text test text test
text test text test text test text test text test text test text
test text test text test text test text test text test text test
text test text test text test text test text test text test text
</div>

<div id="rbody">
</div>
</div>

</body>
</html>

CSS

#mbody{
position:absolute;
border:2px solid red;
width:1000px;
background: red;
height:auto;
}

#lbody{
position:absolute;
left:0px;
height:auto;
border:2PX solid green;
width:400px;
}

#rbody{
position:absolute;
right:0px;
height:500px;
border:2PX solid green;
width:400px;
}

Is This A Good Question/Topic? 0

## Replies To: Expand Parent Div to Height of Child Divs

### #2 sas1ni69

• D.I.C Regular

Reputation: 85
• Posts: 431
• Joined: 04-December 08

## Re: Expand Parent Div to Height of Child Divs

Posted 07 October 2012 - 08:03 PM

Hellos,

This is a fairly common problem so don't worry too much about it. There are two times to go about this. The 'new' way of going about it is like so: (Changes are commented /*here*/)

#mbody{
position:absolute;
border:2px solid red;
background: red;
height:auto;
overflow: auto; /*here*/

}

#lbody{
float: left; /*here*/
left:0px;
height:auto;
border:2PX solid green;
width:400px;
}

#rbody{
float: left; /*here*/
right:0px;
height:500px;
border:2PX solid green;
width:400px;
}

The other way would be to use a clearer div with clear: both;

Hope this helps! If you'd like to look for more help you can try Googling "no float."

### #3 drodriguez

Reputation: 2
• Posts: 93
• Joined: 03-October 12

## Re: Expand Parent Div to Height of Child Divs

Posted 07 October 2012 - 09:39 PM

sas1ni69, on 07 October 2012 - 08:03 PM, said:

Hellos,

This is a fairly common problem so don't worry too much about it. There are two times to go about this. The 'new' way of going about it is like so: (Changes are commented /*here*/)

#mbody{
position:absolute;
border:2px solid red;
background: red;
height:auto;
overflow: auto; /*here*/

}

#lbody{
float: left; /*here*/
left:0px;
height:auto;
border:2PX solid green;
width:400px;
}

#rbody{
float: left; /*here*/
right:0px;
height:500px;
border:2PX solid green;
width:400px;
}

The other way would be to use a clearer div with clear: both;

Hope this helps! If you'd like to look for more help you can try Googling "no float."

So the float:left; worked great at first. but the website i was going to integrate this into was going to have more content that just several lines of text. so to test it i put in a lot more lines of text to extend the div past the bottom of the page. when i did this it put the div that should be aligned on the right side directly below the one on the left. i tried adding the clear:both but i dont really understand how it works or how it should be used. ive tried researching it but, from my understanding, is used to make sure divs stay below other divs, which is not what im trying to do. so, i worked backwards, i tried taking out several lines of text to align them next to each other and now they are still stacked on one another. any ideas as to what is going on?

### #4 sas1ni69

• D.I.C Regular

Reputation: 85
• Posts: 431
• Joined: 04-December 08

## Re: Expand Parent Div to Height of Child Divs

Posted 07 October 2012 - 09:44 PM

Hi there,

Could you post the new code that you've tested with please? I'll try to explain the clear: both method

### #5 drodriguez

Reputation: 2
• Posts: 93
• Joined: 03-October 12

## Re: Expand Parent Div to Height of Child Divs

Posted 07 October 2012 - 09:52 PM

css

#mbody{
position:absolute;
border:2px solid red;
width:1000px;
background: red;
overflow:auto;
}

#lbody{
float:left;
left:0px;
height:auto;
border:2PX solid green;
width:400px;
}

#rbody{
float:left;
right:0px;
height:300px;
border:2PX solid green;
width:400px;
}

html

<html>
<title>Im Confused</title>

<body>

<div id="mbody">
<div id="lbody">
text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text

text text text text text

<div id="rbody">
</div>
</div>

</body>
</html>

### #6 sas1ni69

• D.I.C Regular

Reputation: 85
• Posts: 431
• Joined: 04-December 08

## Re: Expand Parent Div to Height of Child Divs

Posted 07 October 2012 - 10:01 PM

Alrighty!

In order to use the clear both method, you're supposed to add another div at the bottom with the style of clear: both;

<div id="mbody">

<div id"lbody"><p>Some content</p></div>

<div id"rbody"><p>Some content</p></div>

<div style="clear:both;"></div>

</div>

This should work fine. In your current case, I noticed you haven't closed the lbody div. Add a </div> at about line 57 and your code should be fine again

### #7 drodriguez

Reputation: 2
• Posts: 93
• Joined: 03-October 12

## Re: Expand Parent Div to Height of Child Divs

Posted 07 October 2012 - 10:09 PM

sas1ni69, on 07 October 2012 - 10:01 PM, said:

Alrighty!

In order to use the clear both method, you're supposed to add another div at the bottom with the style of clear: both;

<div id="mbody">

<div id"lbody"><p>Some content</p></div>

<div id"rbody"><p>Some content</p></div>

<div style="clear:both;"></div>

</div>

This should work fine. In your current case, I noticed you haven't closed the lbody div. Add a </div> at about line 57 and your code should be fine again

Wow, imma dummy. lol i closed out the lbody div and it worked just fine. Thank you so much =D

### #8 sas1ni69

• D.I.C Regular

Reputation: 85
• Posts: 431
• Joined: 04-December 08

## Re: Expand Parent Div to Height of Child Divs

Posted 07 October 2012 - 11:12 PM

Don't worry about it. You might want to use a text editor that highlights unclosed divs and such. It makes noticing things like these a lot simpler