Extraño comportamiento de flotación en IE7

Question

Quiero crear una caja 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 hace bien en Firefox y Chrome:

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

Sin embargo IE7 se mete por completo y pone el elemento flotante derecho a la derecha de la página:

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

¿No puede esto ser reparado?

Answer 1

especificar el ancho en el div exterior. Si que la anchura en su div contenido significa que esta es la anchura total de la caja, simplemente añadirlo a la div más exterior, y quitar (opcionalmente) que de contenido, como este:

<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

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

Answer 3

Esto es sólo una rápida Responda, así que sostengo mis manos si no funciona. Creo que la solución de Marko probablemente funcione si solo agregas ancho mínimo en lugar de ancho. Si también estás intentando atender a ie6, es posible que necesites utilizar un hack, ya que ie6 y sus descendientes no admiten el ancho mínimo.

Esto debería funcionar con IE7 y otros navegadores modernos. Establezca el min-ancho a 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 4

me fijo usando jQuery para emular el comportamiento de los navegadores no-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 5

trate de poner a position:relative; padre-elemento y el elemento hijo. Me solucionó el problema.

Answer 6

Tengo que saber recientemente que los elementos flotados a la derecha deben ser añadidos 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>