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

Das verhindert bei möglichen Rundungsfehlern im Internet Explorer, dass die letzte Spalte plötzlich nicht mehr daneben, sondern unterhalb der anderen Spalten angezeigt wird. Auf unser Beispiel übertragen heißt das Folgendes:

Und das ist gleichzeitig ein weiterer Einsatzbereich für negative Margins: So kann ein kleiner negativer Wert für Margin bei gefloateten Spalten verhindern, dass Spalten plötzlich untereinander statt nebeneinander angezeigt werden. Das ist natürlich nicht die einzige Variante eines Dreispalters, der auf negative Margins setzt. Ein weiteres Beispiel ist das von Matthew Levine vorgestellte Layout "In Search of the Holy Grail".

Gleich lange Spalten

Im Unterschied zu Tabellen-Layouts haben CSS-Layouts immer eine Besonderheit: Die Spalten sind nicht gleich hoch, sondern nur so hoch, wie es der jeweilige Inhalt erfordert. Zum Simulieren von gleich langen Spalten gibt es verschiedene Techniken, am bekanntesten ist sicher die von Dan Cederholm beschriebene Faux-Columns-Methode, bei der Hintergrundbilder im umfassenden Container untereinander wiederholt werden und so die Spalten simulieren.

Diese Methode hat aber auch ihre Nachteile: Eventuell brauchen Sie zusätzliche Container, bei farblichen Anpassungen müssen Sie immer das Bild verändern und außerdem gibt es ja auch Layouts, die mit em und anderen Einheiten arbeiten, bei denen Faux Columns nicht ohne Weiteres funktionieren.

Aber es gibt noch zwei weitere Techniken für gleichlange Spalten - und die setzen auf negative Margins. Die erste von Alex Robinson besticht durch ihre Einfachheit: Alle Spalten erhalten einen sehr hohen Wert für padding-bottom und werden damit länger als der Viewport des Browserfensters.

Damit Fußzeilen oder Ähnliches wieder im sichtbaren Bereich auftauchen, wird der hohe Wert für padding-bottom durch einen genauso hohen negativen Wert für margin-bottom aufgehoben. Jetzt ist zwar die Fußzeile da, wo sie hingehört, aber Scrollleisten zeigen an, dass die Spalten viel zu lang sind. Dagegen hilft overflow: hidden in einem alle Spalten umfassenden Container.

Leider hat jedoch overflow in diesem Beispiel seltsame Nebenwirkungen. Die unangenehmste ist, dass man bei der Verwendung von internen Sprungmarken zwar zur entsprechenden Stelle springen kann, aber die anderen Inhalte teilweise nicht mehr sichtbar sind. Alex Robinson diskutiert die Probleme ausführlich und zeigt auch, wie man sie beheben kann.

Allerdings verliert diese Methode dann ihren Charme der einfachen Implementierung. Einen vom Aufbau etwas komplexeren Ansatz für gleich lange Spalten, dafür ohne die gerade genannten Nachteile, beschreibt Ingo Chao mit seinen Companion Columns. Hier gibt es zusätzlich zu den eigentlichen divs für die Spalten die Kompagnons, zu jeder Spalte also einen Begleiter.

Diese Dummy-Container kommen nach den eigentlichen Spalten und werden auf dieselbe Art nebeneinander angeordnet. Das Entscheidende aber ist. Diese Begleiter erhalten einen sehr hohen Wert für padding-top und einen entsprechend hohen negativen Wert für margin-top.

Und overflow: hidden, was bei der Lösung von Alex Robinson solche Probleme macht, braucht man hier nicht, da die Spalten durch den Viewport abgeschnitten werden. Allerdings werden für die Lösung von Ingo Chao mehrere weitere div-Container im Quellcode benötigt, was einen gewissen zusätzlichen Aufwand bedeutet.