Comportement de flottement étrange dans IE7

Question

Je souhaite créer une boîte simple avec une barre d'en-tête contenant un titre et quelques boutons d'outil. Je le balisage suivant:

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

Cela rend bien dans Firefox et Chrome:

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

Cependant IE7 salit totalement et met le droit élément flottant à droite de la page:

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

Est-ce que cela peut être résolu?

Answer 1

dans div spécifier la largeur extérieure. Si cette largeur dans votre contenu div signifie que c'est la largeur totale de votre boîte, il suffit d'ajouter à la div plus à l'extérieur, et (éventuellement) le retirer du contenu, comme ceci:

<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

Faire ce <div style="background-color:blue; padding: 1px; height: 20px;> le parent des 2 divs flottant également clear:all

Answer 3

Ceci est juste un rapide répondre, alors je tiens mes mains si ça ne marche pas tout à fait. Je pense que la solution de Marko fonctionnera probablement si vous ajoutez juste min-width plutôt que la largeur. Si vous essayez de répondre également à ie6, vous devrez peut-être utiliser un hack, car la largeur min n'est pas supportée par ie6 et ses descendants. Donc, cela devrait fonctionner avec IE7 et d'autres versions modernes. Réglez la min-largeur à tout ce qui est approprié.

<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

Je l'ai fixé en utilisant jQuery pour imiter le comportement des navigateurs non-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

Essayez de mettre à position:relative; élément parent et à l'enfant-élément. Cela a résolu le problème pour moi.

Answer 6

Vous avez appris récemment que les bons éléments flottants doivent être ajoutés aux divs avant les autres éléments. C'est la solution la plus simple sans ajouter de ligne de changement.

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