IE und Firefox, der eins so ... der andere so
Maria Martin
- css
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
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
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ß
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
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.