Expand Parent Div to Height of Child Divs

Page 1 of 1

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

#1 drodriguez  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • 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>
<head>
<title>Im Confused</title>

<link rel="stylesheet" type="text/css" href="divs.css" />
</head>

<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;
}


Thank you in advance.

Is This A Good Question/Topic? 0
  • +

Replies To: Expand Parent Div to Height of Child Divs

#2 sas1ni69  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 430
  • 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."
Was This Post Helpful? 1
  • +
  • -

#3 drodriguez  Icon User is offline

  • D.I.C Head

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

Re: Expand Parent Div to Height of Child Divs

Posted 07 October 2012 - 09:39 PM

View Postsas1ni69, 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?
Was This Post Helpful? 0
  • +
  • -

#4 sas1ni69  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 430
  • 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 :shuriken:
Was This Post Helpful? 0
  • +
  • -

#5 drodriguez  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • 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>
<head>
<title>Im Confused</title>

<link rel="stylesheet" type="text/css" href="divs.css" />
</head>

<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>

Was This Post Helpful? 0
  • +
  • -

#6 sas1ni69  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 430
  • 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 ;)
Was This Post Helpful? 1
  • +
  • -

#7 drodriguez  Icon User is offline

  • D.I.C Head

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

Re: Expand Parent Div to Height of Child Divs

Posted 07 October 2012 - 10:09 PM

View Postsas1ni69, 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
Was This Post Helpful? 0
  • +
  • -

#8 sas1ni69  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 430
  • 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 :rockon:
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1