Zu Zeiten der guten alten Tabellenlayouts war ein klassischer Footer gar kein Problem: Man nehme eine Tabelle mit einer Höhe von 100% und positioniere seine Elemente darin. Heutzutage, mit Rücksicht auf Webstandards und einer Verantwortung gegenüber den Zielen des Semantic Web, ist das keine ernstzunehmende Option mehr. Widmen wir uns also dem Weg zur Lösung, ein Footer, der bei beliebig komplexem Inhalt sowohl optisch als auch semantisch den Abschluss einer Seite bildet, dabei aber auch valide und browserübergreifend funktionieren soll.

Die Basiszutaten

Um ein Element absolut in einem anderen zu positionieren, muss das Elternelement relativ positioniert sein, dass heißt, um den Footer passend setzen zu können, benötigen wir einen „Container“, der relativ positioniert ist. In diesem Container befindet sich zusätzlich unser Contentblock, der im Normalfall die Höhe des Containers je nach seinem Inhalt vergrößert oder verkleinert. Das führt zu folgendem Markup:

<div id=“page“>
	<div id=“content“>...</div>
	<div id=“footer“>...</div>
</div>

Folgender CSS-Code setzt die obigen Überlegungen um:

#page  { 
position:relative;	
}
#footer {
position:absolute;
bottom:0;		
}

Da absolut positionierte Elemente aus dem normalen Elementfluss genommen und über normal fließende Elemente gesetzt werden, muss je nach Höhe des Footers noch ein Bottom-Padding zum Content-Bereich hinzugefügt werden: