07.08.2009

Horizontale Seitenzentrierung ohne Div

Wie zentriert man eine Seite? Man packt den Gesamtinhalt in einen allumfassenden "Wrapper-Div", gibt diesem einen Breitenwert und zentriert ihn mit margin: 0 auto;. Ganz einfach, so wie im allerersten Kapitel der CSS-Fundgrube beschrieben.
"Ganz einfach"? Nein, es geht sogar noch einfacher. Wir brauchen nämlich überhaupt keinen Div, sondern können die Zentrierung ebenso gut über den body vornehmen. Ein Div weniger, somit weniger "Div-Suppe", und zudem noch schlankerer Quelltext.

Die Vorgehensweise ist dabei die Gleiche: body erhält die gewünschte Breite und wird mit margin: 0 auto; in die Mitte gesetzt. Damit der Effekt deutlich wird, weisen wir zu Demozwecken noch einen Rahmen zu.

body {
width: 750px;
margin: 0 auto;
border: 3px solid #f00;
}

Klappt wunderbar, wie in Demo 1 zu sehen. Natürlich könnt ihr dem body auch noch margin-top und padding-Werte oder andere CSS-Eigenschaften zuweisen; ich habe darauf der Einfachheit halber verzichtet.
Wer seine Seite nicht eingerahmt haben will, verwendet vielleicht lieber eine Hintergrundfarbe zwecks Bereichsabgrenzung. Versuchen wir es also mal damit:

body {
width: 750px;
margin: 0 auto;
background-color: #2894ff;
}

Hoppla - An der Breite wurde nichts verändert. Es wurde lediglich der Rahmen entfernt und dem breitenbegrenzten body eine Hintergrundfarbe zugewiesen. Dennoch ist nun die ganze Seite blau wie in Demo 2 zu erkennen.

Nun hätte ich dieses Kapitel ja sicher nicht geschrieben, gebe es für diesen sonderbaren Effekt keine Lösung:
Dem body übergeordnet ist das "Stammelement" html. Wenn wir diesem eine vom body abweichende Hintergrundfarbe zuweisen, dann wird auch optisch wieder deutlich, dass unser body eine begrenzte Breite hat und ganz stramm und zentriert in der Mitte steht. Also ergänzen wir die CSS-Angaben noch um eine beliebige Hintergrundfarbe für html, z.B. mit

html {
background-color: #ffffff;
}

und schon haben wir eine ausschließlich über den body horizontal zentrierte Website wie Demo 3 beweist.

Auf die Möglichkeit der "Body-Zentrierung" wurde ich übrigens durch diesen Beitrag von Peter Müller aufmerksam, Autor von Die Little Boxes-Box, 2 Bde inkl. CD-ROM. Übrigens ein hervorragendes Werk, speziell für den CSS-Einstieg geeignet.

nach oben