Floating elements dropping out of container in IE7 and sometimes in WebKit browsers too

Question

I have following CSS code and my floats are dropping out of their containers. Firefox doesn't have this problem. What could be reason for this behaviour?

<div class="container">
    <div class="leftmenu">
        ... some stuff here ...
    </div>
    <div class="rightmenu">
        <div style="float: right; text-align: right;">
            <button class="ui-state-disabled ui-state-default ui-corner-all"> Button 1 </button>
            <button class="ui-state-disabled ui-state-default ui-corner-all"> Button 2 </button>
            <button class="ui-state-disabled ui-state-default ui-corner-all"> Button 3 </button>
            <button class="ui-state-disabled ui-state-default ui-corner-all"> Button 4 </button>
        </div>
    </div>
</div>

Answer 1

The container, in your case "div.container", will not be able to calculate the correct height of itself once its children are floated. If there are any child blocks that are not floated, the container will use the height of the tallest one among them.

A container with both of its child blocks floated is common anyway. There are certain ways to fix this. Consider the approaches summarized by QuirksMode the best. http://www.quirksmode.org/css/clearing.html

So, to solve your problem, just add this in your CSS file.

div.container { overflow: auto; width: 100%; } 

NOTICE: The width value could be any value you want. but it is obligated to trigger the HasLayout behavior in IE[67]

Another work around. You may use an extra div:

<div style="clear: both;"></div>

Add this after div.right in div.container.

However, there is better way to do this. Add an .clearfix utility class in your CSS:

.clearfix {
  *zoom: 1;
}

.clearfix::before,
.clearfix::after {
  display: table;
  content: "";
}

.clearfix::after {
  clear: both;
}

Add clearfix to the class attribute of div.container.

Answer 2

In some rare case the

<div style="clear:both;"></div> 

will not work because in such case div use default line-height and default font-size

Put this class in CSS

.clear { clear: both; font-size: 0px; line-height: 0px; height: 0px; overflow:hidden; }

and use it in code

<div class="leftmenu">
... some stuff here ...
</div>
<div class="rightmenu">
... some stuff here ...
</div>
<div class="clear"></div>