Strano comportamento del galleggiante in IE7

Question

Voglio creare una semplice casella con una barra di intestazione contenente un titolo e alcuni pulsanti degli strumenti. Ho il seguente 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>

Questo rende bene in Firefox e Chrome:

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

Tuttavia IE7 rovina totalmente e mette l'elemento mobile a destra a destra della pagina:

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

È possibile risolvere questo problema?

Answer 1

Specifica la larghezza nel div esterno. Se quella larghezza nel div del contenuto indica che questa è la larghezza totale del riquadro, aggiungila semplicemente al div più esterno e (facoltativamente) rimuovila dal contenuto, in questo modo:

<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

Questa è solo una risposta rapida, quindi alzo le mani se non funziona del tutto. Penso che la soluzione di Marko probabilmente funzionerà se aggiungi solo la larghezza minima anziché la larghezza. Se stai cercando di soddisfare anche ie6, potrebbe essere necessario utilizzare un hack, poiché la larghezza minima non è supportata da ie6 e dai suoi discendenti.

Quindi questo dovrebbe funzionare con IE7 e altri browser moderni. Imposta la larghezza minima su ciò che è appropriato.

<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

L'ho corretto usando jQuery per emulare il comportamento dei browser 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

Prova a mettere position:relative; sull'elemento genitore e sull'elemento figlio. Mi ha risolto il problema.

Answer 5

Recentemente ho saputo che gli elementi flottanti a destra devono essere aggiunti ai div prima degli altri elementi. Questa è la soluzione più semplice senza aggiungere una linea di modifica.

<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

Rendi <div style="background-color:blue; padding: 1px; height: 20px;> il genitore dei 2 div galleggianti anche clear:all