I am dealing with a simple layout where I have a main div that floats to the left. Within this main div, I nest other divs using the clear both style. Below is a simplified version of my setup:
<div id="wrapper" class="floatLeft">
<div id="mainMenu" class="clearBoth">
<div id="item1" class="clearBoth">
</div>
<div id="item2" class="clearBoth">
</div>
<div id="item3" class="clearBoth">
</div>
</div>
</div>
.clearBoth {
clear: both;
}
.floatLeft {
float: left;
}
The issue I am facing is that the height of item3 is being calculated as 0 for some unknown reason. As a result, all the elements within it overflow into the wrapper div, creating an undesirable appearance since the main menu div has a background applied. Adding the "overflow:hidden" style to item3 resolves the problem, but I am puzzled as to why there is an overflow in the first place. More importantly, I am trying to understand why the height of item3 is being computed as 0.
For reference, here is a link to the jsfiddle implementation: http://jsfiddle.net/uPtCd/