Einspaltige Layouts

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Es soll ein Layout erstellt werden, das eine Hauptspalte enthält, wie in folgender Abbildung gezeigt.

Abbildung: Eine einspaltige Seitendarstellung.

Lösung

Weisen Sie dem linken und rechten Außenabstand des body-Elements Prozentwerte zu:

Diskussion

Durch die Verwendung von Prozentwerten für den linken und rechten Außenabstand des Dokumentkörpers bleibt die Spaltenbreite flexibel, wodurch sich der Inhalt über die gesamte Breite des Browserfensters des Benutzers erstrecken kann.

Soll die Spalte eine feste Breite erhalten, definieren Sie den Wert der Eigenschaft width für das Element body mit einer absoluten Längeneinheit (z.B. Pixel):

Dadurch wird die Spalte auf der linken Seite des Browserfensters angeordnet. Soll die Spalte in der Mitte zentriert werden, umgeben Sie den gesamten Inhalt mit einem div-Element und versehen dieses mit einem einmaligen id-Attribut, zum Beispiel frame:

In der CSS-Regel weisen Sie anschließend dem linken Innenabstand des body-Elements einen Wert von 50% zu:

Mit einem ID-Selektor weisen Sie der Spalte einen negativen Wert zu. Dieser entspricht der halben Spaltenbreite. Dabei sollten Sie darauf achten, dass die Spalte die gleiche Breite erhält wie das Element body.

Vielleicht glauben Sie jetzt, das Ziel auch dadurch erreichen zu können, dass Sie den linken und rechten Außenabstand auf auto setzen:

Dieser – eigentlich sehr gute und geradlinige – Ansatz funktioniert aber leider nicht in Internet Explorer für Windows. Daher greifen wir in dieser Lösung auf einen Workaround zurück, der mit den meisten gängigen Browsern funktioniert.

Siehe auch

Das Rezept Elemente auf einer Webseite zentrieren zum Zentrieren von Elementen in einem Webdokument und das Rezept Horizontale Navigationsmenüs zur Erstellung eines horizontalen ("Karteireiter"-)Navigationsmenüs.