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.

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

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