Child DIV will not display inside of Parent DIV - html

Question

Okay, my problem is that #main_content is the child of #content but it will not display in #content. I need for #content to vertically expand to #main_content's size. Also, #content is a part of #main_wrap, which should extend all the way to #footer. Any help would be greatly appreciated.
#main_wrap {
width: 850px;
margin-top:15px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#top {
width: 850px;
height: 288px;
}
#top_content {
width:850px;
height:250px;
}
#nav {
background-color:#333;
height:38px;
#content {
width:850px;
padding-top:15px;
padding-bottom:15px;
}
#main_content {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
float:left;
width:850px;
height:auto;
}
#footer {
float: left;
width:100%;
height:250px;
background-image:url(images/footer_bg_blue.png);
background-repeat:repeat-x;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
text-align:center;
}
#footer_cont {
padding-top:15px;
padding-bottom:15px;
}
<div id="main_wrap">
<div id="top">
<div id="top_content">
</div>
<div id="nav">
</div>
</div>
<div id="content">
<!--<div id="sidebar">
</div>-->
<div id="main_content">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero risus, tincidunt a placerat vel, dignissim eget ligula. Mauris lobortis adipiscing orci, ut scelerisque nibh rhoncus nec. In metus ante, bibendum ac hendrerit et, vulputate id dolor. Sed et tellus at ipsum molestie tempus. Ut vitae vulputate sem. Sed sed ipsum elit, eget adipiscing magna. Sed et nisl eros, vitae convallis dui. Nullam nec feugiat nisi. Praesent in tortor ut enim molestie fermentum a et enim. Proin at porttitor ligula. Nulla vitae vulputate mauris. Donec auctor odio elit, vel egestas justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec suscipit pretium mollis. Sed egestas hendrerit quam eu pellentesque. Phasellus pharetra urna in mauris bibendum interdum. Pellentesque pellentesque pellentesque eros, eu adipiscing lectus fermentum id. Nullam iaculis, nisi auctor tincidunt hendrerit, eros quam accumsan elit, at cursus quam quam ac leo</p>
</div>
</div>
<!--</div>-->
<div id="footer">
<div id="footer_cont">
test
</div>
</div>

Answer 1

You can specify overflow: hidden; for your #content div to expand its height all the way to the footer, as you can see at this jsFiddle, http://jsfiddle.net/68FFL/2/. I'm not really sure why that works. If you look at the WordPress.com Mystique theme demo, you'll see that they use that rule to expand their #main div, otherwise it has no height like yours did.
I'm not entirely sure, but I think one of the reasons why you're #content div had no height was because it had child elements that weren't in the document flow on the inside, because they were floated. If you put another element inside that isn't floated, then the height of the div will expand, as you can see here, http://jsfiddle.net/68FFL/3/