Erstellt man eine Datei mit drei divs, wobei das erste div die beiden anderen umschließt und das erste inenliegende div nach links gefloatet wird und eine Breite erhält. Das zweite innenliegende div erhält im ersten Schritt nur einen Abstand nach links:
HTML-Code:
<div id=”all”>
<div id=”links”>
</div>
<div id=”rechts”>
</div>
</div>
Der CSS-Code:
#links
{
float:left;
width:30%;
height:200px;
background:#ccc
}
#rechts
{
height:200px;
background:#999;
margin-left:30%
}
Ruft man nun die Datei in verschiedenen Browser auf, zum Beispiel Firefox, IE oder Opera, so wird sie immer gleich dargestellt.
Im nächsten Schritt gibt man dem div#rechts overflow:hidden:
#rechts
{
height:200px;
background:#999;
margin-left:30%;
overflow:hidden
}
Betrachtet man sich die geänderte Datei nun im Browser so verhält sich der Opera anders als IE und Firefox:
Während im Firefox und im IE keine optische Veränderung eintritt, scheint sich der Abstand des div#rechts nach links zu verdoppeln. Nun stellt sich die Frage, wo der Fehler liegt…
Nach einigem Recherchieren haben wir herausgefunden, dass nur der Opera den W3C- Vorgaben entsprechend richtig reagiert, während IE und Firefox nicht den Befehl nicht richtig ausführen.