Eine Fußleiste hinzufügen

Unser eben fertiggestelltes Layout funktioniert hervorragend, solange wir nicht versuchen, eine Fußleiste einzufügen, die sich über alle drei Spalten erstreckt.

Falls die mittlere Spalte der Seite am längsten ist, scheint das Hinzufügen der Fußleiste auf den ersten Blick ganz einfach zu sein. Um das zu demonstrieren, erweitern wir den HTML-Code unmittelbar vor dem schließenden </div>-Tag des wrapper-Elements.

In unser Stylesheet fügen wir die folgenden Regeln ein:

Aber wo ist jetzt unser Problem? Wie die folgende Abbildung zeigt, sieht im Browser alles korrekt aus.

Abbildung: Die Fußleiste ins ins Layout eingefügt.

Lassen Sie sich nicht täuschen, hier gibt es ein Problem. Es tritt zum Vorschein, wenn Sie ein paar Artikel aus dem Hauptbereich löschen, sodass dieser kürzer wird als die Seitenleisten. Nachdem Sie die Seite neu geladen haben, sehen Sie es deutlich. Die Fußleiste schließt am Ende des Hauptbereichs an und hat sich deshalb in die Seite hinein hochgeschoben. Und, wie Sie in der folgenden Abbildung sehen, überblenden die Seitenleisten die Fußleiste. Hoppla!

Abbildung: Die Seitenleisten überdecken die Fußleiste.

Die Fußleiste scheint unter den Seitenleisten zu liegen, die absolut positioniert sind. Damit sind sie aus dem normalen Textfluss des Dokuments herausgelöst. Das bedeutet, dass sie im Dokument nicht unmittelbar hinter dem vorhergehenden Element dargestellt werden, wie es sonst der Fall wäre. Der Hauptbereich wurde nicht positioniert, weshalb die Fußleiste direkt unterhalb des Hauptbereichs ausgegeben wird. Die Seitenleisten hingegen werden an ihren Platz positioniert und werden von dort ausgehend dargestellt, ohne Rücksicht auf andere Teile der Seite. Wenn Sie irgendein Element mit position: absolute aus dem Textfluss herausnehmen, wird dieses Element komplett unabhängig von allen anderen Seitenelementen angezeigt und diese einfach überblenden, wenn sie im Wege stehen.

Wenn Sie eine Seite entwickeln, können Sie nie davon ausgehen, dass eine Spalte immer länger sein wird als eine andere. Wenn Sie dann noch eine Fußleiste in Ihr Layout integrieren möchten, müssen Sie daher eine andere Lösung finden. Bevor wir uns aber diesen neuen Lösungsweg anschauen, müssen wir noch ein bisschen mehr über die Eigenschaft float wissen.