float-Problem in IE und FF

[Susanne]

Hi alle,

ich habe ein Problem mit verschachtelten Float-Elementen. Genaugenommen zwei, eines im IE und eines im FF, beide mit dem gleichen Code:

<div style="width: 600px; margin: 0px auto; background-color: red; float: left; padding: 10px 10px;">

<div style="float: left; width: 200px; background-color: blue; margin-right: 10px;">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla.</div>

<div style="float: left; background-color: green; margin: 0px; padding: 0px;">m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m m Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.</div>

</div>

Der IE macht fast genau das, was ich haben will: Beide inneren DIVs nebeneinander, das äußere DIV drumherum. Nur verdoppelt er aus irgendeinem Grund den Abstand zum rechten Rand!? Ich dachte zuerst, das wäre der altbekannte "IE Double Margin Bug" (http://www.positioniseverything.net/explorer/doubled-margin.html), aber wenn er das ist, funktinoniert jedenfalls das bisher bekannte Gegenmittel (display: inline) nicht mehr ...

Der FF hingegen weigert sich, den grünen Kasten neben den blauen zu setzen, und schiebt ihn lieber darunter, wo er dann die volle Breite einnimmt. (Der IE verhält sich übrigens genauso, wenn ich dem blauen Kasten das "float: left" wegnehme; dann stimmt auch der Abstand rechts.) Kann man das irgendwie umstellen? Mein Problem ist im praktischen Einsatz, dass ich dem grünen Kasten keine Breite vorgeben kann, da die des blauen Kastens unterschiedlich sein kann.

Ach ja: Doctype ist strict.

Danke, falls Ihr Euch die Zeit nehmt, das durchzusehen ...

Susanne

[Susanne]

Kleines Update: Im IE hilft ein "display: inline-block" im grünen Kasten.

Das Firefox-Problem wird dadurch nicht beeinflusst, da bräuchte ich also noch Hilfe ... hat jemand eine Idee für mich?

Susanne

[Detlef G.]

Hallo Susanne,

der Effekt im FF kommt dadurch zustande, dass gefloatete Elemente versuchen die Breite ihres Inhalts anzunehmen, wenn keine Angaben zur Breite gemacht werden. Warum sollte der FF den Inhalt eher umbrechen, wenn er den grünen Block auch unter den blauen schieben um mehr in eine Zeile zu bekommen.

Du hast mehrere Möglichkeiten. Welche davon für dich die günstigste ist, musst du selbst entscheiden.

Du kannst der grünen Box eine passende Breite geben, oder

du kannst der grünen statt float:left einen passenden linken Rand geben (margin-left:210px), oder

du kannst der grünen Box statt float:left einen von visible abweichenden Wert für overflow geben (hidden oder auto) und _nur_ für IE eine Angabe zu height.

Auf Wiederlesen
Detlef