Teil 4: CSS: Profi-Tipps und Tricks - Negative Margins

body erhält position: relative, damit es als Bezugspunkt für die Positionierung der zentrierten Box dient. Außerdem benötigt es eine Mindestgröße und Mindesthöhe in den Ausmaßen von #zentrum; Sie können aber auch ein paar Pixel dazugeben.

Damit bleiben die Inhalte immer erreichbar. Allerdings versteht der Internet Explorer Mindesthöhe und -breite erst seit Version 7. Damit die Inhalte bei kleinem Browserfenster auch im Internet Explorer 6 nicht verschwinden, gibt es zwei Möglichkeiten:• Entweder Sie setzen auf die gängigen Methoden zur Simulation von Mindestbreite und -höhe wie die Microsoft-proprietären Expressions• oder Sie benutzen einen zusätzlichen Container mit den Ausmaßen der Box: Dieser sorgt dafür, dass das Browserfenster bei Verkleinerung mit Scrollbalken versehen wird.

Entweder Sie setzen auf die gängigen Methoden zur Simulation von Mindestbreite und -höhe wie die Microsoft-proprietären Expressions oder Sie benutzen einen zusätzlichen Container mit den Ausmaßen der Box: Dieser sorgt dafür, dass das Browserfenster bei Verkleinerung mit Scrollbalken versehen wird.

Negative Margins bei Floats

Besonders spannende Einsatzmöglichkeiten für negative Margins ergeben sich in der Kombination mit Floats: So lassen sich flüssige Layouts gestalten, bei denen Sie die Reihenfolge der Elemente im Quellcode bestimmen können.

Wie sich negative Margins konkret in Kombination mit gefloateten Elementen auswirken, hängt davon ab, ob die negativen Margins an der Seite sind, in die gefloatet wird, oder an der entgegengesetzten.

Verwenden Sie float: left in der Kombination mit einem negativen linken Margin, so ist das Ergebnis ähnlich wie bei den statischen Elementen: Das gefloatete Element wird in die angegebene Richtung bewegt, kann damit auch aus dem Bildschirm heraus bewegt werden:

Wenn Sie das im Internet Explorer 6 ausprobieren, werden Sie die gefloatete Box zunächst nicht sehen. Hier schlägt nämlich der Double Float Margin Bug zu: Wenn Float und Margin in dieselbe Richtung gehen, verdoppelt der Internet Explorer 6 den Außenabstand.

Im Beispiel verschiebt er die Box nicht nur um 100px, sondern um 200px nach links. Um das zu verhindern, benötigt der Internet Explorer 6 zusätzlich die Angabe display: inline.

Weiter unten lesen Sie, wie sich diese Kombination von negativen Margins und Float bei einem Dreispalten-Layout geschickt nutzen lässt. Floaten Sie hingegen in die eine Richtung und vergeben in der anderen Richtung den negativen Margin, ist die Wirkung eine ganz andere.