Wundermittel für CSS

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

Um die Überlappung der in #container und #sidebar stehenden Inhalte zu vermeiden, kommt der innerhalb von #container stehende Bereich #inhalt ins Spiel. Hier ergänzen Sie ein margin-left in der Breite von 200px: Damit gibt es keinerlei Überschneidungen mehr.

#inhalt {
margin-left: 200px;
}

Wenn Sie den Inhaltsbereich mit einer Hintergrundfarbe versehen wollen, müssen Sie die Angaben ebenfalls bei #inhalt machen. #container ist dafür ungeeignet, weil er sich ja über das ganze Browserfenster erstreckt.

Magische Verschiebungen

Wie Sie negative Margins bei einem Dreispalter benutzen, zeigt Alex Robinson. Es geht wieder um ein per Float realisiertes Layout, bei dem der Inhaltsbereich ebenfalls im Quellcode an erster Stelle sein soll:

<div id="inhalt"></div><div id="navigation"></div><div id="sidebar"></div>

Im Layout hingegen soll der Inhalt an seiner üblichen Stelle platziert werden - nämlich in der Mitte. Hierfür erhalten alle Bereiche eine Breite und werden links gefloatet.

#inhalt {
float: left;
width: 34%;
}
#navigation {
float: left;
width: 33%;
}
#sidebar {
float: left;
width: 33%;
}

Noch aber fehlt etwas ganz Wesentliches. Denn bisher wird die Inhaltsspalte ganz links angezeigt, rechts davon folgen Navigation und Sidebar. Für das gewünschte Layout müssen #inhalt und #navigation den Platz tauschen und dafür bieten sich Margins an.

CSS: Profi-Tipps&Tricks

© Archiv

Gleich lange Spalten über große Werte für padding-bottom und einen negativen Wert für margin-bottom.

Der Inhaltsbereich erhält margin-left: 33%, also einen linken Margin in Breite des Navigationsbereichs. Damit befindet sich der Inhaltsbereich an der richtigen Stelle, nun muss man nur noch die Navigation dazu bringen, dass sie links anstelle von rechts des Inhaltsbereichs angeordnet wird.

Dies geschieht über einen negativen Margin, der so groß ist wie die Breite des Inhaltsbereichs und die Breite der Navigation, im Beispiel also -67%. Somit ergeben sich folgende Formatierungen:

#inhalt {
float: left;
width: 34%;
margin-left: 33%;
display: inline;
}
#navigation {
float: left;
width: 33%;
margin-left: -67%;
display: inline;
}
#sidebar {
float: left;
width: 33%;
}

Außerdem wurde bei #inhalt und #navigation noch ein display: inline ergänzt, um den Double Float Margin-Bug im Internet Explorer 6 zu verhindern.

Diese Technik wird an verschiedenen Stellen eingesetzt, so beispielsweise auch beim CSS-Framework YAML für die suchmaschinenoptimierte Variante. Hier gibt es allerdings zwei Modifikationen: Die dritte Spalte - im Beispiel #sidebar - wird rechts anstelle von links gefloatet und erhält außerdem ein margin-left: -5px.

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​".