Aufbau eines zentrierten Seitenlayouts mit CSS

Um dieses traditionelle, auf Tabellen beruhende Layout in CSS umzuwandeln, ersetzt man einfach die Tabelle und ihre Zellen mit divs. Ein div ersetzt die Tabelle selbst und weitere divs ersetzen die einzelnen Zellen der Tabelle, die die wichtigsten Elemente des Layouts darstellen, etwa den Header, den Footer, die Seitenleiste und den Hauptinhalt. Die divs sind mit individuellen IDs versehen, auf die mit einem CSS-Selektor Bezug genommen werden kann, um eine Gestaltung zu erzeugen, die sich speziell auf das div mit der entsprechenden ID bezieht. Das div, das die Tabelle ersetzt, trägt die Bezeichnung id=outer und die anderen divs sind entsprechend ihrer jeweiligen Funktion bezeichnet.

Hier der überarbeitete XHTML-Code mit divs anstelle einer Tabelle:

Man beachte, dass sämtliche Präsentations-Formatierungen, die sich zuvor in den Tags <table> und <td> befanden, entfernt wurden. Die leeren Absätze vor und nach der Tabelle sind ebenfalls verschwunden. Die CSS-Gestaltung wird sämtliche Formate und Abstände setzen.

Hier der CSS-Code, der die Seite mit einem zentrierten Layout versieht, das dem auf Tabellen beruhenden Layout oben ähnelt.

Abbildung B zeigt das Ergebnis – eine zentrierte Seite, die mit CSS gestaltet wurde.