CSS float: 3 Spalten Layout mit geänderter Reihenfolge

Im Prinzip ist an einem CSS 3 Spalten Layout mit float nicht viel dran. Aber wenn das ganze in geänderter Reihenfolge im Quelltext erscheinen soll, wird es schon etwas kniffeliger. Die geänderte Reihenfolge beim CSS 3 Spalten Layout macht für die Suchmaschinenoptimierung Sinn, damit die Spalte mit dem Content der Webseite als erstes im Quelltext erscheint. Schließlich wollen wir es den Suchmaschinen einfach machen und die wichtigeren Inhalte unseres Layouts nach vorne setzen.

Nachfolgend möchte ich in einem Tutorial erklären, wie ein CSS 3 Spalten Layout mit float und vor allem mit geänderter Reihenfolge umgesetzt wird. Dazu fangen wir mit einem einfachen 3 Spalten Layout mit CSS float an:

CSS float: 3 Spalten Layout

Der HTML Code für unsere 3 Spalten sieht z.B. wie folgt aus:

<div class="spalte1">Spalte 1</div>
<div class="spalte2">Spalte 2</div>
<div class="spalte3">Spalte 3</div>
<div class="clearing"></div>

Mittels CSS werden diese 3 Spalten formatiert und mit float nebeneinander gesetzt. Ich gebe den 3 Spalten noch unterschiedliche Farben und setze sie etwas von einander ab:

.spalte1 { width:20%; height:50px; background:#FFFF99; float:left; margin-right:1%; }
.spalte2 { width:25%; height:40px; background:#CCFF99; float:left; margin-right:1%; }
.spalte3 { width:10%; height:50px; background:#FFCC99; float:left; }
.clearing { clear:both; }

Die Klasse clearing wird benötigt, damit nachfolgende Elemente nicht ebenfalls in diesem float hängen. Das Ganze sieht dann im Layout wie folgt aus:

Spalte 1
Spalte 2
Spalte 3

Mein Quelltext sieht aus wie die HTML Programmierung. Erst kommt Spalte 1, danach Spalte 2 und zuletzt Spalte 3. Nun möchte ich aber, dass Spalte 2 als erstes im Quelltext erscheint, danach soll Spalte 3 kommen und erst als letztes Spalte 1. Das Ganze soll aber optisch im Layout ganz genauso aussehen wie bisher.

CSS float: 3 Spalten Layout mit geänderter Reihenfolge

Damit ich mein Layout mit geänderter Reihenfolge umsetzen kann, muss ich erst einmal die HTML Programmierung meines Layouts an die geänderte Reihenfolge anpassen:

<div class="spalte2">Spalte 2</div>
<div class="spalte3">Spalte 3</div>
<div class="spalte1">Spalte 1</div>
<div class="clearing"></div>

Würde ich jetzt die obige CSS Formatierung für diese 3 Spalten nehmen, dann sähe das Ergebnis wie folgt aus:

Spalte 2
Spalte 3
Spalte 1

Wie Sie sehen, das passt noch nicht. Ich muss also an der CSS Formatierung schrauben, damit diese HTML Programmierung meine gewünschte Optik erreicht. Dazu arbeite ich mit zusätzlichen margins in meinem CSS Style und muss etwas rechnen. Spalte 2 wird soweit links eingerückt, dass sie an der 2ten Stelle in der Mitte steht und Spalte 1 wird mit negativen margins nach links an die optisch erste Stelle gerückt:

.spalte1 { width:20%; height:50px; background:#FFFF99; float:left; margin-right:1%; margin-left:-67%; }
.spalte2 { width:25%; height:40px; background:#CCFF99; float:left; margin-right:1%; margin-left:21%; }
.spalte3 { width:20%; height:50px; background:#FFCC99; float:left; }
.clearing { clear:both; }

Spalte 2 erhält im CSS also zusätzlich margin-left:21%;, was sich aus der Breite von Spalte 1 plus dem rechten margin errechnet (20% + 1%). Damit sieht mein Ergebnis von Spalte 2 und Spalte 3 schon mal so aus:

Spalte 2
Spalte 3

Spalte 3 erhält den negativen margin-left:-67%;, der sich aus den Breiten von Spalte 1, 2 und 3 + den rechten margins errechnet (20% + 25% + 1% + 20% + 1%). Und mein optisches Ergebnis sieht nun so aus:

Spalte 2
Spalte 3
Spalte 1

Wer übrigens in seinem CSS 3 Spalten Layout mit der gesamten Breite arbeitet, der kann für Spalte 3 statt mit float:left; auch mit float:right; arbeiten, also die dritte Spalte rechts floaten und nicht links.

Das CSS float Layout können Sie natürlich auch mit Pixeln statt mit Prozent anwenden. Prozentwerte haben nur den Vorteil, dass das Layout responsive ist und so mit der Bildschirmgröße mitwächst beziehungsweise kleiner wird.

Wer sich an dieser Stelle fragt, wozu man ein CSS float 3 Spalten Layout mit geänderter Reihenfolge brauchen könnte, der braucht nur einen Blick auf das eine oder andere 3-spaltige Layout werfen. Wer möchte, dass der Inhalt (Spalte 2) als erstes im Quelltext erscheint, wird auf diese Technik zurückgreifen. Die beiden Sidebars (Spalte 1 und Spalte 3) sind im Quelltext erst danach angeordnet.