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

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