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.

© 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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.