Eine mir oft gestellte Frage: “Wie zentriere ich mein Design im Browser?”

Als Basis dient uns ein einfaches einspaltiges Layout. Der zu zentrierende div-Bereicht heißt: “center”.

Der div-Bereich erhält in diesem Beispiel eine feste Breite und die horizontalen Ränder werden auf “auto” gesetzt:

Im Quirks-Modus erkennen der IE 5.x und 6 allerdings keine automatischen Ränder. Durch einen kleinen Hack wird die Fehlinterpretation der Eigenschaft “text-align: center” des IE zur Zentrierung genutzt.

Dieser kleine Hack hat keine negativen Auswirkungen auf den Code. Für den Netscape 6 brauchen wir jedoch noch eine Erweiterung, denn sobald die Breite des Browserfensters kleiner als die Breite des center-Bereichs wird, setzt sich die linke Seite über den center-Bereich. Damit dies nicht geschieht, benötigt der body für den NS 6 eine Mindestbreite.

Das war es schon Viel Spaß beim zentrieren!