Aufbau eines zentrierten Seitenlayouts mit CSS

Zentrierte Seitenlayouts basieren oft auf einer Tabelle von 800 Pixeln Breite die dann auf einer Seite von 1024 Pixeln Breite zentriert wird. Interessant ist die Frage, wie man diesen Effekt auch mit CSS erreichen kann.

Die grundlegende Technik zum Erzeugen eines zentrierten Layouts in CSS ist relativ einfach, wenn auch nicht ganz nahe liegend. Was also muss man tun, um dieses alte Versatzstück aus einem tabellenorientierten Layout in CSS zu überführen?

Zentrierte Layouts mit herkömmlichen Verfahren

Zum Vergleich hier zunächst ein Beispiel für ein Seitenlayout, das auf einer zentrierten Tabelle beruht. Der folgende Code erzeugt das in Abbildung A gezeigte Beispiel:

Der Tag <table> enthält Attribute, die die Breite auf 80 Prozent der Seitenbreite festlegen und die Tabelle auf der Seite zentrieren. Ein leerer Absatz vor der Tabelle sorgt für einen vertikalen Abstand zwischen dem oberen Seitenrand und dem oberen Rand der Tabelle. Ein weiterer leerer Absatz nach der Tabelle erfüllt dieselbe Funktion am unteren Seitenrand. Die Tabelle selbst enthält zwei Spalten und drei Zeilen mit Zellen. Die Zellen in der oberen und der unteren Zeile wurden jeweils miteinander verbunden, um Flächen für Header und Footer zu schaffen, während die Zellen in der mittleren Zeile zwei Spalten bilden – eine für den Hauptinhalt und eine weitere für eine Seitenleiste.

Dies ist ein sehr einfaches Bespiel für ein Verfahren, das bereits seit Jahren weit verbreitet ist. In der realen Anwendung sind in die Haupttabelle gewöhnlich weitere Tabellen eingebettet, wodurch sich ein komplexeres Layout ergibt. Die höhere Komplexität ändert aber nichts an dem zugrunde liegenden Verfahren.