CSS-basierte Layouts

Es gibt verschiedene Arten CSS-basierte Layouts zu realisieren; der möglicherweise flexibelste und am einfachsten zu realisierende funktioniert mit der Verwendung von gefloateten div-Elementen, die jeweils die Seitenteile beinhalten. Der Vorteil dieser Technik liegt sowohl im leicht verständlichen Ansatz als auch in der Eigenschaft, aufgrund der hierarchischen Struktur sehr leicht editierbar zu sein. Diese Layouts lassen sich mit wenigen Handgriffen auch sehr gut an Browserfenstergröße oder eingestellte Schriftgröße anpassen, wie man weiter unten sehen wird.

Die folgenden mehrspaltigen Layoutformen basieren bis auf ein paar kleine (weiter unten angemerkte) Details auf der folgenden xhtml-Struktur und beinhalten einen Seitenheader, einen Contentbereich für den eigentlichen Inhalt, einen Navigationsbereich (durch eine Liste realisiert) und einen Seitenfooter.

[...]
<div id="container">
    <div id="header">
    </div>
    <div id="content">
    </div>
    <ul id="navigation">
       <li>...</li>
       <li>...</li>
    </ul>
    <div id="footer">
    </div>
</div>
[...]

Die verlinkten Beispiele wurden zum Teil um CSS-Regeln ergänzt, die nicht unbedingt notwendig sind, aber z.B. die Position und Größe der verschiedenen Objekte besser anschaubar machen indem borders und einige Abstände hinzugefügt wurden.