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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…