Spaltenreihenfolge ändern mit float und margin

In dieser kleinen Anleitung soll es darum gehen, die Spaltenreihenfolge, mit Hilfe von CSS so zu ändern, dass ein Eingreifen im HTML-Markup nicht nötig ist. Das hat den Vorteil, dass der Inhalt der Webseite, abgesehen vom Kopfbereich, als erstes im HTML-Quelltext steht.

Zweispalten-Layout mit float

Bei einem Zweispalten-Layout ist es am einfachsten, die Spaltenreihenfolge zu ändern. Dazu muss die Richtung mit float:left und float:right im Wechsel festgelegt werden.

HTML-Markup

...
...
<div id="inhalt">Inhaltsbereich</div>
<div id="navi">Navigationsbereich</div>
...
...

CSS-Angaben für ein Zweispalten-Layout

#inhalt { 
 float:left;              
 width:60%;
}

#navi {
 float:left;
 width:40%;
}

Das Ergebnis

Inhaltsbereich

Die mit CSS festgelegte Anordnung der Spalten entspricht der Reihenfolge im HTML-Markup. Um die Reihenfolge der Spalten zu ändern, muss lediglich die Flussrichtung von #inhalt geändert werden.

Geändertes CSS

 #inhalt { 
 float:right;              
 width:60%;
}

#navi {
 float:left;
 width:40%;
}

Das Ergebnis mit float:right

Inhaltsbereich

Dreispalten-Layout mit float

Nach dieser Methode kann die Reihenfolge auch im Dreispalten-Layout geändert werden. Nur lässt sich die erste Spalte nicht in die Mitte platzieren.

Um den Inhaltsbereich (erste Spalte) eines Dreispalten-Layouts in die Mitte zu platzieren, müssen mindestens zwei Spalten mit margin verschoben werden. Die Richtung alleine mit float zu ändern geht hier nicht.

HTML-Markup

...
...
<div id="inhalt">Inhaltsbereich</div>
<div id="navi">Navigationsbereich</div>
<div id="info">Infobereich</div>
...
...

Nun wird die Reihenfolge wie folgt geändert:

  1. 1. #navi
  2. 2. #inhalt
  3. 3. #info

Dazu bekommt #inhalt einen linken Außenabstand von 20% und entspricht der Breite von #navi. Nun muss noch #navi mit einem negativen Margin nach links verschoben werden. Der Wert von margin-left ist die Summe der Breiten von #inhalt und #navi.

Geänderte CSS-Angaben

#inhalt { 
 float:left;              
 width:50%;
 margin-left:20%;
}

#navi {
 float:left;
 width:20%;
 margin-left:-70%;
}

#info {
 float:left;
 width:30%;
}

Das Ergebnis mit margin-left

Inhalt
Info

Dies soll's gewesen sein und hoffe, dass euch diese Anleitung weitergeholfen hat. Viel Spaß!

erstellt am 31.08.2012

nach oben