Maria Martin: IE und Firefox, der eins so ... der andere so

Hallo liebes Forum,

ich habe folgende Zeieln:

<div style="width:500px; height:30px; background-color:#00FFFF;">A</div>

<div style="width:30px; height:20px; background-color:#FFCC99; float:left;">L</div>

<div style="width:300px; height:30px; background-color:#99FF00; ">B</div>

IE zeigt es so an, wie ich es haben möchte.
Box A in einer Zeile, darunter
Box L und rechts davon Box B

Was muss ich ändern, dass es mit dem Firefox auch
so angezeigt wird?

(Es soll mit beiden Browsern gleich angezeigt werden)

Gruß
Maria

  1. Hallo,

    Was muss ich ändern, dass es mit dem Firefox auch
    so angezeigt wird?

    Gib dem letzen div einen passenden linken Abstand.

    Viele Grüße
    Frank

    1. DANKE

      so sieht es aus:

      <div style="width:500px; height:30px; background-color:#00FFFF;">A</div>
      <div style="width:30px; height:20px; background-color:#FFCC99; float:left;">L</div><div style="width:300px; height:30px; background-color:#99FF00; margin-left:30px;">B</div>

      Aber warum ist das so???
      Ich möchte dies gerne verstehen!

      Gruß

      1. Hi,

        Aber warum ist das so???
        Ich möchte dies gerne verstehen!

        schau Dir mal http://de.selfhtml.org/css/layouts/einfuehrung.htm#boxmodell an. In dem Beispiel siehst Du auch, daß floatende Boxen keinen Platz reservieren, sondern lediglich die Inhalte benachbarter Boxen hierum fliessen.
        Der IE hat grundsätzlich Probleme damit, Überlagerungen (ohne absolute Positionierung) umzusetzen und spannt daher den Hintergrund in Deinem Beispiel nicht über die floatende Box. Den border im SELFHTML-Beispiel schafft er so gerade noch...

        freundliche Grüße
        Ingo

      2. Aber warum ist das so???
        Ich möchte dies gerne verstehen!

        Gibt genug Artikel im Internet, die floats erklären.

        Nur ne kurze Erklärung;

        Das B-Div weiß nichts vom L-Div, deswegen ändert das B-Div auch nicht seine Position durch ein Float. (Der Float beeinflusst nur den Bereich vom B-Div, der mit Text gefüllt wird; deswegen befindet sich das „B“ auch nicht 'unter' dem grünen L-Kasten, sondern ist sichtbar daneben.)

        Wenn du nun das B-Div rechts vom L-Div haben willst, musst du dem deswegen mit margin-left einen Abstand zur linken Seite geben, damit er eben nicht mehr unter dem L-Div liegt.