Why is the height of my div tag being calculated as 0 in Chrome?

Question

I'm working on a webpage (link text), but I'm having trouble with the height property in Google Chrome. If you view the page, you'll notice that there is no background color. This is because the #mainContent has a height of 0px. In Internet Explorer, this is not the case. Does anyone have ideas?

Answer 1

This is because the inner content is being floated. Parent elements do not take the height of floated children. Try adding overflow: hidden; to the #mainContent css.

Answer 2

Everything inside of #mainContent is floating. Floats don't make their container resize. The easiest solution is to add a clear right before then end of #mainContent like so:

<div id="mainContent">
<!-- inner bars -->
<div style="clear:both;"></div>
</div>