Extraño comportamiento de flotación en IE7

Question

Quiero crear un cuadro simple con una barra de encabezado que contenga un título y algunos botones de herramientas. Tengo el siguiente marcado:

<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>

Esto se ve bien en Firefox y Chrome:

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

Sin embargo, IE7 se equivoca totalmente y coloca el elemento flotante derecho a la derecha de la página:

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

¿Se puede arreglar esto?

Answer 1

Especifique el ancho en el div más externo. Si ese ancho en su div de contenido significa que este es el ancho total de su cuadro, simplemente agréguelo al div más externo y (opcionalmente) elimínelo del contenido, así:

<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

Esta es solo una respuesta rápida, así que levanto mis manos si no funciona. Creo que la solución de Marko probablemente funcionará si solo agrega min-ancho en lugar de ancho. Si está tratando de atender también a ie6, es posible que necesite usar un truco, ya que ie6 no admite el ancho mínimo y es descendiente.

Entonces, esto debería funcionar con IE7 y otros navegadores modernos. Establezca el ancho mínimo en lo que sea apropiado.

<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

Lo arreglé usando jQuery para emular el comportamiento de los navegadores que no son IE:

    // 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

Intente poner position:relative; al elemento padre y al elemento hijo. Resolvió el problema para mí.

Answer 5

Conocí recientemente que los elementos flotantes correctos deben agregarse con los divs antes que los otros elementos. Esta es la solución más fácil sin agregar una línea de cambio.

<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

Haga que este <div style="background-color:blue; padding: 1px; height: 20px;> sea el padre de los 2 divs flotantes también clear:all