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

Question

I am working on a webpage ( link text ), but I am having problems with the height property in Google Chrome. If you view the page, you will notice that the background color is missing. This is because #mainContent has a height of 0px. In Internet Explorer, this is not so. Does anyone have any ideas?

Answer 1

This is due to the fact that the inner contents are floating. Parents do not occupy the height of floating children. Try adding overflow: hidden;to #mainContentcss.

Answer 2

#mainContent . . , #mainContent :

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

Answer 3

, div #mainContent, . , , .

css:

.clearfix{
    clear:both;
}

div clearfix div maincontent:

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

, div mainContent .

Answer 4

-, , , . ( #mainContent)

quirksmode.

Answer 5

: ;