Die rote Linie markiert die Breiten von 500px und 0px.
Das grüne Raster entspricht je 100px.
Das hellgraue Raster entspricht je 10px.
Zum besseren Verständnis ist es vorteilhaft, folgenden Artikel gelesen zu haben:
CSS, die Browser und die Tücken des modernen WebDesign
Noch einmal zur Erinnerung:
CSS-Boxmodell: width steht dem Inhalt zur Verfügung, padding, margin und border liegen aussen. Der horizontaler Platzbedarf der Box beträgt width + 2xpadding + 2xmargin + 2xborder.
IE-Boxmodell (IE5 und IE6 im Quirks-Modus): Inhalt, padding und border liegen innerhalb von width, margin liegt aussen. Der horizontale Platzbedarf der Box beträgt width + 2xmargin.
Das ist eine ganz normale div-Box mit width: 500px, border: 10px, padding: und margin: jeweils 20px. Beachtet bitte, dass die 20px margin nicht zu sehen sind, da man dem margin keine Hintergrundfarbe zuweisen kann.
IE5 und IE6 im Quirks-Modus:
1x500px(width) + 2x20px(margin) = 540px. Padding und border liegen innerhalb von width (IE-Boxmodell)
Alle anderen Browser
(incl. IE6 im standardkonformen Modus, also mit DTD):
1x500px(width) + 2x20px(margin) + 2x10px(border) + 2x20px(padding) = 600px. Padding und border liegen ausserhalb von width (CSS-Boxmodell)
Die Abweichung beträgt in diesem Fall 60px, so sollte man eine Internetseite mit mehreren nebeneinander liegenden Boxen also nicht gestalten.
Der Unterschied zwischen Box 01 und Box 02 ist nur im Internet Explorer bis IE6 zu sehen. In allen anderen mir bekannten Browsern sind sie gleich positioniert.
Das ist die gleiche Box wie Box 01, nur mit float: left.
IE5 und IE6 im Quirks-Modus::
1x500px(width) + 3x20px(margin) = 560px. Padding und border liegen innerhalb von width (IE-Boxmodell)
IE6 im standardkonformen Modus:
1x500px(width) + 3x20px(margin) + 2x10px(border) + 2x20px(padding) = 620px. Padding und border liegen ausserhalb von width (CSS-Boxmodell), das linke margin wird doppelt angezeigt (IE-Fehler in der Interpretation von CSS, bis Version IE6).
Alle anderen Browser:
1x500px(width) + 2x20px(margin) + 2x10px(border) + 2x20px(padding) = 600px. Anzeige von padding, margin und border nach CSS-Boxmodell.
Der IE5/6 versagt bei einer Kombination von float und margin, er verdoppelt in diesem Fall das margin auf der linken Seite der Box. Die gesamte Box verschiebt sich um 1x margin (in diesem Fall um 20px) nach rechts.
Da bei der Gestaltung von Internetseiten mittels CSS (ohne Layout-Tabellen) die Kombination von margin und float in der Regel sehr oft gebraucht wird, ist nun das Boxmodell-Chaos perfekt. Wir haben nun schon 3 unterschiedliche Interpretationen verschiedener Browser.
Beachtet bitte, dass auch bei dieser Box das margin von 20px bzw. 40px links (IE5/6) nicht zu sehen ist.
Die linke Box floatet links, das heisst, sie ist linksbündig ausgerichtet und wird von Text rechts umflossen.
Einer weiteren Box, die rechts an die linke Box anschliessen soll, muss ich sagen, wie weit vom linken Rand weg sie beginnen soll.
Wenn sich die linke Box in jedem Browser anders verhält, habe ich ein Problem.
Diese Box ist eigentlich eine Verschachtelung von 2 Boxen und sieht in allen mir bekannten Browsern gleich aus.
Der einfache Trick:
padding: 0, margin: 0, border: 0 und die gewünschte Gesamtbreite in px. Dieser äusseren Box wird das float zugewiesen.
Da diese äussere Box weder padding noch margin und auch keinen Rahmen hat, versteht das auch IE5/6 richtig, 0 bleibt eben 0, auch wenn man es verdoppelt.
Da sich die innere Box ohne width-Zuweisung in ihrer Gesamtbreite incl. margin innerhalb der äusseren Box maximal ausbreitet, entspricht der gesamte horizontale Raum, den diese verschachtelte Box einnimmt, immer der width-Zuweisung für die äussere Box.
Diese verschachtelte Box nimmt immer einen horizontalen Raum von 500px ein. Dieser Wert wurde der äusseren Box als width zugewiesen. Die innere Box kann ich nun mit allen nur möglichen Angaben von padding, margin und border innerhalb der äusseren Box verschieben.
Das funktioniert in jedem mir bekannten Browser, der CSS einigermassen kann (NN4 also ausgeschlossen, aber vor dem wird das Stylesheet in der Regel ja sowieso versteckt). Und das völlig ohne CSS-Hacks, mit einer Verschachtelungstiefe von lediglich 2.
Da frage ich mich doch ganz einfach, wozu jemals ein Boxmodell-Hack erfunden wurde. Oder ist das hier schon einer? ;-)
Übrigens, jetzt kann man das margin der inneren box sehen, da ich der äusseren Box die Hintergrundfarbe hellgrau zugewiesen habe.
Der äusseren Box ein border zuweisen sollte man nicht, denn sobald ich der Aussenbox einen Rahmen von auch nur 1px verpasse, gibt es schon wieder unterschiedliche Interpretationen der Browser (siehe Box 4).
Nur dann, wenn ich ganz genau weiss, welchen horizontalen Raum die linke Box einnimmt, kann ich rechts davon eine weitere Box pixelgenau ansetzen, so wie hier.
Nur die Box 03 nimmt in jedem gängigen Browser, der CSS versteht, den gleichen horizontalen Raum ein.
Bei den anderen linken Boxen (Box 01, 02 und 04) kommt es in verschiedenen Browsern zu unterschiedlichen Anzeigen, die die Seite unbrauchbar machen können, weil sich z. b. die linke und die rechte Box übereinander schieben, und Inhalte eventuell nicht mehr sichtbar sind. Zumindest aber sieht die Seite nicht in allen Browsern so aus, wie ich mir das gedacht habe.
Die links beschriebene verschachtelte Box 03 funktioniert im IE5, im IE6 (Quirksmodus und standardkonformer Modus) und in allen mir bekannten aktuellen Browsern.
Nur zur Verdeutlichung der letzten Bemerkung aus Box 03: Hier wurde der äusseren Box ein border: 10px zugewiesen, ansonsten ist sie mit Box 03 identisch.
IE5 und IE6 im Quirks-Modus:
1x500px(width) = 500px. Border liegt innerhalb von width (IE-Boxmodell).
Alle anderen Browser (incl. IE6 im standardkonformen Modus, also mit DTD):
1x500px(width) + 2x10px(border) = 520px. Border liegt ausserhalb von width (CSS-Boxmodell).
Das eigentlich korrekte Boxmodell des IE5 legt nämlich border innerhalb von width an, während alle anderen Browser dem falschen Boxmodell von CSS folgen und border ausserhalb von width anlegen. Wenn ich also der äusseren Box einen Rahmen gebe, rechnen den manche Browser der Gesamtbreite zu, manche nicht.
Mehr dazu könnt Ihr hier lesen:
CSS, die Browser und die Tücken des modernen WebDesign
Also, wenn Ihr Euer Layout pixelgenau anlegen wollt, müsst Ihr bei der äusseren Box padding, margin und border auf 0 setzen, so wie bei Box 03.
Diese Box schiebt sich teilweise unter die linke Box, da diese durch den 10px-Rand der äusseren Box 20px zu breit ist. Links verschwinden Rand und padding der rechten Box unter der linken Box.
Im IE5 und im IE6 im Quirks-Modus passiert das nicht, da diese den 10px-Rand der äusseren Box innerhalb der 500px width anzeigen (die der äusseren Box zugewiesen sind).
Gebe ich nun der rechten Box 520px Abstand vom linken Rand der Seite, entsteht im IE5 und im IE6 (im Quirks-Modus) eine Lücke.
Die einzige browserunabhängig sichere Lösung ist Box 03.
Man kann nicht alle Browser haben. Wenn Ihr Browser entdeckt, bei denen die Box 03 nicht funktioniert, informiert mich bitte kurz, damit ich diese Erkenntnisse hier mit einfliessen lassen kann. Ich habe diese Seite mit IE5/6, Opera 9 und Mozilla Firefox 2.0.0.3 getestet. Ich denke jedoch, dass diese Lösung (Box 03) in allen gängigen Browsern funktioniert und auch zukunftssicher im Hinblick auf die weitere Entwicklung der Browser ist.