Im Prinzip ist an einem 3 Spalten Layout mit float in CSS 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 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 die wichtigeren Dinge und die wichtigeren Inhalte unseres Layouts nach vorne setzen.
Heute möchte ich Euch 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 float an.
CSS 3 Spalten Layout mit float
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:100px; height:50px; background:#FFFF99; float:left; margin-right:10px; }
.spalte2 { width:150px; height:40px; background:#CCFF99; float:left; margin-right:10px; }
.spalte3 { width:100px; 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:
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 3 Spalten Layout mit float und geänderter Reihernfolge
Dazu muss ich erst einmal die HTML Programmierung meines 3 Spalten 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:
Ihr seht, 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:100px; height:50px; background:#FFFF99; float:left; margin-right:10px; margin-left:-380px; }
.spalte2 { width:150px; height:40px; background:#CCFF99; float:left; margin-right:10px; margin-left:110px; }
.spalte3 { width:100px; height:50px; background:#FFCC99; float:left; }
.clearing { clear:both; }Spalte 2 erhält im CSS also zusätzlich margin-left:110px;, was sich aus der Breite von Spalte 1 plus dem rechten margin errechnet (100px + 10px). Damit sieht mein Ergebnis von Spalte 2 und Spalte 3 schon mal so aus:
Spalte 3 erhält den negativen margin-left:-380px;, der sich aus den Breiten von Spalte 1, 2 und 3 + den rechten margins errechnet (100px + 10px + 150px + 10px + 100px + 10px). Und mein optisches Ergebnis sieht nun so aus:
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.
Wer sich an dieser Stelle fragt, wozu man ein CSS 3 Spalten Layout mit geänderter Reihenfolge brauchen könnte, der braucht nur einen intensiveren Blick auf dieses Layout werfen. Das wurde mit genau dieser Technik erstellt.
