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

try explicitly defining the default

height:auto;

Answer 2

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 3

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>

Answer 4

I have a feeling it will be something to do with the contents of the #mainContent div not pushing out the container properly. You should be able to fix this a number of different ways, such as using a clearing div.

Add the following css:

.clearfix{
    clear:both;
}

And add a div with the clearfix class before closing the maincontent div:

<div id="mainContent">
    <div id="rightSide">
     ...
    </div>
    <div id="content">
     ...
    </div>
    <div class="clearfix"/>
</div>

This should remind the browser to force open the mainContent div to fit its contents.

Answer 5

Haha, this will be a hard question for you to check as answered because there are a variety of ways to clear floats. (You can also try floating #mainContent as well)

Here's the wonderful quirksmode article.