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:

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

Can this be fixed?

Answer 1

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

Answer 2

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 3

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 4

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 5

width 200 solution worked for me i also added "clear all"

Answer 6

it dosnt work for me :(

Is there any other options?

Please can someone help, it only happens in ie 7

www.tl.tlatest.co.uk

The div boxes go in a line instead of in 2x2