CSS-Floats für ein dreispaltiges Seitenlayout

Hier ein Beispiel für ein dreispaltiges Layout, das diese Technik verwendet. Die etwas schrille Farbgebung dient nur dazu, die einzelnen div-Elemente deutlicher hervorzuheben. Hier der zugehörige XHTML-Code:

Und hier der CSS-Code:

Ein paar Anmerkungen zum Code

Die Reihenfolge der div-Element im HTML-Code ist wichtig. Die linken und rechten div-Elemente müssen vor dem mittleren div-Element stehen, so dass sich die beiden Randspalten an ihre Position am Bildschirmrand bewegen können. Der Inhalt des mittleren div-Elements wird sich dann in den Platz dazwischen einfügen. Falls der Browser erst auf das mittlere div-Element stößt und dann auf eines der beiden div-Elemente für die Randspalten, füllt das mittlere div-Element die Seite bis zum Rand aus und das folgende Float wird darunter positioniert statt daneben.

Die clear: both-Angaben in den Styles div#header und div#footer stellen sicher, dass die schwebenden div-Elemente auf Kopf- oder Fußzeile übergreifen. Die Angabe padding: 1px im div#header-Style dient zur Vermeidung eines ungewünschten Streifens Hintergrundfarbe, der in Netscape oben auf der Seite erscheint, falls padding auf null gesetzt ist.

Die Angabe float: left im div#left-Style sorgt dafür, dass das div-Element ganz links angeordnet wird. Die Angabe width: 150px legt für die Spalte ein Breite fest, aber man kann hier auch einfach einen Prozentwert einsetzen. Im div#right-Style bewirkt die Angabe float: right, dass das div-Element am rechten Rand platziert wird. In diesem Fall drücken die Floats die div-Elemente ganz bis an den Rand des Browserfensters. Wären diese div-Elemente stattdessen in einem anderen div-Element enthalten, würden die Floats sie an die Ränder dieses div-Elements drücken.

Im div#middle-Style ermöglicht es das Fehlen einer clear-Angabe, dass der Inhalt des mittleren div-Elements frei zwischen den beiden Randspalten fließen kann. Die Angabe padding: 0px 160px 5px 160px sorgt rechts und links für ausreichend Platz für die 150 Pixel breiten Randspalten plus 10 Pixel Extraplatz.

Dies ist ein recht grobes und einfaches Beispiel, aber es illustriert die grundlegende Technik für den Einsatz des float-Attributs bei div-Elementen zur Erstellung der Randspalten eines dreispaltigen flexiblen Layouts.