ansaurus

Question

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

Answer 1

A:

Put this code in the bottom of the #rightmenu div:

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

The clear both style ends the float from both the left and right sides. Putting the clear just after the floated element prevents float leakage by terminating the float effect to within the container's parent element.

2009-09-29 08:30:17

Answer 2

+2 A:

the container, in your case "div.container", will not be able to calculate the actual height of itself once it's children are all floated. if there's child block which are not floated, the container will use the highest one's height among them.

a container with two child blocks both float is common anyway. there are certain ways to fix this. consider the approaches summarized by QuicksMode 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's value could be any value you want. but it is obligated due to some IE6/7 issue.

another work around:

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

add this after div.right in div.container.

nil 2009-09-29 08:41:29

Giving the container an explicit width was the key for me. Very helpful answer, thank you!

tehblanx 2010-06-21 13:51:48

Answer 3

+1 A:

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>

se_pavel 2009-09-29 14:27:34

Answer 4

A:

The div rightmenu has no height because it contains only floated elements which do not have a height themselves.

To clear the float use

<div class="rightmenu" style="overflow:hidden;zoom:1;background-color:#ccc;">

The overflow:hidden will clear the float for firefox, safari and chrome. The zoom:1 invokes hasLayout for ie6/ie7. The background-color:#ccc is just so you can see the div does contain the floats.

Emily 2009-10-03 11:33:07

It's not working...

newbie 2009-10-03 20:24:43

Answer 5

A:

Without knowing what the "leftmenu" and "rightmenu" classes do, it's hard to work out your exact issue, but try adding overflow: hidden; to any element is NOT floated, but HAS floated children. i.e.: div.rightmenu in the example, and any other rules in your CSS.

Stephen 2009-10-08 03:51:35

Answer 6

A:

This works:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<div class="container">
    <div class="leftmenu">
        ... some stuff here ...
    </div>
    <div class="rightmenu" style="padding-bottom: 5px !ie; border: 1px solid black;">
        <div style="float: right; text-align: right;">
                <button style="display: inline-block;" 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>
        <br style="clear: both;" />
    </div>
</div>
</body>
</html>

Palo Verde 2009-10-09 21:41:27

ansaurus

tags:

views:

answers:

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

related questions