Beispielseiten

• Basis
• Fertig

Mit float können Sie nicht nur Grafiken schweben lassen, sondern auch ganze div-Bereiche, und das HTML bleibt, wie es ist.

In diesem Abschnitt erstellen Sie ein einfaches zweispaltiges Layout mit einer senkrechten Navigation auf der linken Seite, das im Browser wie folgt aussieht:

Abbildung 16.1: Das fertige zweispaltige Layout

Das Layout wird in sieben Schritten erstellt:

1. Floaten des Navigationsbereichs
2. Textbereich mit einem großen linken Rand versehen
3. Vorbereitung der ungeordneten Liste
4. Gestaltung der Hyperlinks in der Liste
5. Aktuellen Navigationspunkt hervorheben
6. Hintergrundfarbe für die Navigation
7. Clearen des Fußbereichs

Denken Sie daran, dass per float positionierte Elemente beim Layouten fast immer eine mit width deklarierte Breite haben. Ohne Breitenangabe wird die Breite gefloateter Elemente unberechenbar, denn sie schrumpfen und werden nur so groß wie ihr Inhalt.