Wundermittel für CSS

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

Diese Angaben haben keinen Effekt auf die Box selbst: Sie ist weiterhin 100% breit und ihre Position ist unverändert. Die Auswirkungen des negativen Werts bei margin-right zeigen sich erst bei nachfolgenden Elementen.

CSS: Profi-Tipps&Tricks

© Archiv

Der Inhaltsbereich passt sich der Breite des Browserfensters an und steht im Quellcode an erster Stelle - negative Margins machen es möglich.

Sie verhalten sich so, als wäre die rechte Außenkante des gefloateten Elements um die angegebenen 200px nach innen verschoben, die Box also um 200px schmaler. Ergänzen wir einmal eine weitere Box, die auf die gefloatete Box folgt und 200px breit ist:

<div id="box1"></div><div id="box2"></div>
#box1 {
width: 100%;
float: left;
margin-right: -200px;
}
#box2 {
width: 200px;
}

Jetzt sehen Sie den etwas seltsamen Effekt: #box2 wird nicht unterhalb von #box1 positioniert, sondern befindet sich rechts darüber: #box1 ist weiterhin 100% breit, die Inhalte verhalten sich entsprechend und gehen über die ganze Breite.

Nachfolgende Elemente hingegen verhalten sich so, als wäre #box1 um die bei margin-right angegebenen Werte schmaler und positionieren sich entsprechend. Beim echten Einsatz auf einer Website ist es natürlich wichtig, auf jeden Fall eine Überlappung der Inhalte zu verhindern - mehr dazu und zu den Vorteilen von negativen Margins in solchen Fällen sollen im Folgenden genauer ausgeführt werden.

Content First

Nehmen wir an, Sie wollen einen einfachen Zweispalter erstellen: Die Sidebar soll 200px breit sein, der Inhaltsbereich den Rest einnehmen. Dafür brauchen Sie zwei div-Elemente:

<div id="sidebar"></div><div id="container"></div>

#sidebar erhält eine Breite von 200px und wird links gefloatet:

#sidebar {
width: 200px;
float: left;
}

Ein linker Außenabstand bei #container sorgt dafür, dass #sidebar Platz hat:

#container {
margin-left: 200px;
}

Für die Suchmaschinenoptimierung und die Barrierefreiheit ist es jedoch manchmal erwünscht, dass der Inhaltsbereich im Quellcode zuerst steht. Und genau hier kommen wir, sofern der Inhaltsbereich keine vorgegebene Breite hat, an die Grenze der vorgestellten Lösung und brauchen negative Margins. Wie das geht, zeigt Ryan Brill in einem Artikel in A List Apart. Nehmen wir folgende HTML-Grundstruktur:

CSS: Profi-Tipps&Tricks

© Archiv

Auch das suchmaschinenoptimierte Layout des CSS-Frameworks YAML setzt auf negative Margins.
<div id="container"><div id="inhalt"></div></div><div id="sidebar"></div>

Jetzt werden die Bereiche per CSS nebeneinander positioniert. #container rechts, #sidebar links.

#container {
width: 100%;
float: right;
margin-left: -200px;
}
#sidebar {
width: 200px;
float: left;
}

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 Ergebnissen…
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 einspannen.…
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…