Wundermittel für CSS

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:

#sidebar {
float: right;
width: 33%;
margin-left: -5px;
}

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.

CSS: Profi-Tipps&Tricks

© Archiv

Ingo Chao zeigt, wie sich über Companion Columns gleich lange Spalten simulieren lassen.

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.

#inhalt, #naviga
tion, #sidebar {
padding-bottom:
32767px;
margin-bottom: -32767px;
}
#wrapper { /* umfassendes Element */
overflow: hidden;
}

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.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".