Comportement de flottement étrange dans IE7

Question

Je souhaite créer une simple boîte avec une barre d’en-tête contenant un titre et des boutons. J'ai 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 gâche totalement et place l'élément flottant de droite à droite de la page:

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

Est-ce que cela peut être corrigé?

Answer 1

Spécifiez la largeur dans la division la plus externe. Si cette largeur dans votre div de contenu signifie qu'il s'agit de la largeur totale de votre boîte, ajoutez-la simplement à la div la plus externe et, éventuellement, supprimez-la 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

Ceci est juste une réponse rapide, alors je lève la main si ça ne marche pas tout à fait. Je pense que la solution de Marko fonctionnera probablement si vous ajoutez simplement min-width plutôt que width. Si vous essayez également de prendre en charge ie6, vous devrez peut-être utiliser un hack, car la largeur minimale n’est pas prise en charge par ie6 et ses descendants.

Cela devrait donc fonctionner avec IE7 et les autres serveurs modernes. Définissez la largeur minimale sur ce qui convient.

<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

Je l'ai corrigé en utilisant jQuery pour émuler 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 4

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

Answer 5

J'ai appris récemment que les éléments flottants de droite devaient être ajoutés aux div avant les autres éléments. C’est le correctif le plus facile sans ajouter 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>

Answer 6

Faites de cette <div style="background-color:blue; padding: 1px; height: 20px;> parent des 2 divs flottantes également clear:all