nicht angemeldet
Google Chrome float Bug?
Ich habe ein kleines Problem mit Google Chrome.:
<div style="width:200px; float:left;"> eine Liste hier</div>
<div style="height:40px;">ein bisschen Text hier</div>
<div>flexible Höhe in diesem Feld</div>
In allen Browsern wird dieser Code korrekt?!? angezeigt indem beide div's rechts von dem ersten stehen. Nur in Google Chrome rutsch das zweite div immer unter das erste div.
-
<div style="width:200px; float:left;"> eine Liste hier</div>
<div style="height:40px;">ein bisschen Text hier</div>
<div>flexible Höhe in diesem Feld</div>
Wenn bei einem div keine Breite und kein float angegeben wird, ist er 100% breit und passt damit nicht neben ein anderes Element. Einige Browser (Firefox, Opera) "überlagern" das float-Element mit einem daneben befindlichen div. Man kann das gut sehen, indem man dem zweiten div eine Hintergrund-Farbe oder einen border gibt. Lediglich der Text im zweiten div weicht dem float-div aus. Was dazu führt, dass deine Konstruktion auch in anderen Browsern nicht zwei getrennte Spalten ergibt, die über die Höhe des float- divs hinausgehen. Korrekt wäre es, dem zweiten div eine Breite und einen linken margin zu geben. Murmelin-
Hallo,
Einige Browser (Firefox, Opera) "überlagern" das float-Element mit einem daneben befindlichen div. Man kann das gut sehen, indem man dem zweiten div eine Hintergrund-Farbe oder einen border gibt.
Lediglich der Text im zweiten div weicht dem float-div aus.
Das ist gut beschrieben, zu ergänzen wäre, dass alle CSS-konformen Browser dieses Verhalten an den Tag legen (müssen).
Elemente, die auf ein Float folgen, liegen nur dann nicht hinter dem Float, wenn sie »Block Formatting Contexts« bilden, also z.B. selbst Floats sind oder overflow: auto/hidden besitzen.
Korrekt wäre es, dem zweiten div eine Breite und einen linken margin zu geben.
Eine Breite zusätzlich zum margin ist nicht zwingend nötig, oder wofür ist sie gedacht?
Mathias
-
Danke.
Fehler gefunden. Jetzt klapts.
-
-
-
Hallo,
In allen Browsern wird dieser Code korrekt?!? angezeigt indem beide div's rechts von dem ersten stehen. Nur in Google Chrome rutsch das zweite div immer unter das erste div.
Ob das dritte div neben dem ersten liegt oder darunter, liegt allein an der Höhe des Inhalts des ersten divs (der besagten Liste).
Aus deinem Beispiel wird nicht klar, was Chrome hier anders macht als andere Browser. Alle CSS-konformen Browser verhalten sich in diesem Punkt gleich. Es kann höchstens sein, dass Chrome andere Standard-Abstände anwendet und sich deshalb die Höhen unterscheiden.
Wenn du willst, dass Elemente neben einem Float immer eingerückt sind, so musst du sie entsprechend formatieren. Siehe Grundlagen für CSS-Spaltenlayout, speziell Mehrspaltigkeit mit float. Entweder kannst du die Elemente, die in der zweiten Spalte stehen sollen, in ein weiteres Element verpacken und dieses ebenfalls floaten lassen. overflow: auto oder overflow: hidden hätten ebenfalls diesen Effekt. Oder du gibst ihnen jeweils ein margin-left, sodass sie eingerückt sind.
Mathias