Strange float behaviour in IE7

Question

I want to create a simple box with a header bar containing a title and some tool buttons. I have the following markup:

<div style="float:left">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; width: 200px; background-color: red;">content</div>
</div>

This renders fine in Firefox and Chrome:

http://www.boplicity.nl/images/firefox.jpg

However IE7 totally messes up and puts the right floated element to the right of the page:

http://www.boplicity.nl/images/ie7.jpg

Can this be fixed?

Answer 1

Specify width in outermost div. If that width in your content div means this is the total width of your box, simply add it to the outermost div, and (optionally) remove it from content, like this:

<div style="float:left; width: 200px;">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; background-color: red;">content</div>
</div>

Answer 2

This is just a quick answer, so I hold my hands up if it doesn't quite work. I think Marko's solution will probably work if you just add min-width rather than width. If you are trying to cater for ie6 as well, you may need to use a hack, as min width is not supported by ie6 and it's descendants.

So this should work with IE7 and other modern browers. Set the min-width to whatever is appropriate.

<div style="float:left; min-width: 200px;">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; background-color: red;">content</div>
</div>

Answer 3

I fixed it using jQuery to emulate the behaviour of the non-IE browsers:

    // IE fix for div widths - size header to width of content
    if (!$.support.cssFloat) {
        $("div:has(.boxheader) > table").each(function () {
                $(this).parent().width($(this).width());
        });
    }

Answer 4

Try putting position:relative; to parent-element and to the child-element. It solved the problem for me.

Answer 5

Got to know recently that the right floated elements need to be appended with the divs before the other elements. This is the easiest fix without adding a line of change.

<div style="background-color:blue; padding: 1px; height: 20px;">
    <div style="float: right; background-color:green;">title</div>
    <div style="float: left; background-color:yellow;">toolbar</div>
</div>

Answer 6

Make this <div style="background-color:blue; padding: 1px; height: 20px;> the parent of the 2 floating divs also clear:all