Ein robustes, flexibles 3-spaltiges Layout mit CSS

Mehrspaltige Layouts sind heutzutage aus dem Webdesign nicht mehr wegzudenken. Dabei haben CSS-Layouts ihre Tücken, was man der komplizierten Funktionsvielfalt von CSS sowie deren uneinheitlicher Umsetzung in den verschiedenen Browsern zu verdanken hat. Man möchte aber ein verlässliches, einfaches Layout, das man ohne groß nachzudenken immer anwenden kann. Gesucht ist also ein CSS-basiertes Layout mit folgenden Eigenschaften:

  • funktioniert immer, d.h. in allen (halbwegs modernen) Browsern sowie in allen Textkonstellationen
  • einfach, möglichst wenig Code
  • keine Browser-Hacks und exotischen CSS-Features
  • flexibel, d.h. mindestens die mittlere Spalte passt sich der Breite des Browserfensters an

Ein solches Layout gibt es, und es wird im Folgenden vorgestellt. Ich präsentiere hier drei Varianten, eine 100%-Variante, die immer funktioniert sowie zwei etwas einfachere Varianten mit kleinen Einschränkungen.

Die Layouts

Variante 1 (100%): verschiedenfarbig, faux columns

Allgemeines: funktioniert immer, egal, wie hoch die einzelnen Spalten sind, bzw. wieviel Text sie enthalten. Verschiedenfarbige Spalten, arbeitet mit Grafiken.

Definition der Spaltenbreiten: nur absolut (px)

Bei diesem Layout kommt die faux columns-Technik zum Einsatz. Das bedeutet, dass die Außenspalten durch Hintergrundbilder simuliert werden, welche in senkrechter Richtung wiederholt werden. Der kleine Nachteil ist, dass die Breite der Außenspalten somit nur absolut in Pixeln angegeben werden kann.

Beispiel:

Rechte Spalte

Mitte

skjdhsjdhf skdjhksjd ksjdhfksjd skdjhfskjd ksdjhf skdjfksjdhf ksjdhfkjshd
Abstandhalter

Implementierung dieser Variante

Variante 2: einfarbig, robust

Allgemeines: funktioniert immer, ohne Grafiken, aber keine verschiedenfarbigen Spalten

Definition der Spaltenbreiten: relativ (em) oder absolut (px)

Dieses ist das einfachste und flexibelste der drei Layouts. Es funktioniert mit allen Spaltenhöhen, ermöglicht aber keine mehrfarbigen Spalten.

Beispiel:

Linke Spalte
Rechte Spalte

Mitte

skjdhsjdhf skdjhksjd ksjdhfksjd skdjhfskjd ksdjhf skdjfksjdhf ksjdhfkjshd
Abstandhalter

Implementierung dieser Variante

Variante 3: mehrfarbig, teilrobust

Allgemeines: verschiedenfarbige Spalten, ohne Grafiken, funktioniert nur, wenn die mittlere Spalte am höchsten ist.

Definition der Spaltenbreiten: relativ (em) oder absolut (px)

Schön ist bei diesem Layout, dass man die Breite der rechten und linken Spalte auch relativ definieren kann. Dieses Layout ist die erste Wahl, wenn der Inhalt der Außenspalten eine bestimmte Höhe nie überschreitet, und man sicherstellen kann, dass die mittlere Spalte immer höher ist. Für die mittlere Spalte kann man z.B. eine Mindesthöhe definieren, oder ggf. Leerzeilen einfügen.

Beispiel:

Linke Spalte
Rechte Spalte

Mitte

skjdhsjdhf skdjhksjd ksjdhfksjd skdjhfskjd ksdjhf skdjfksjdhf ksjdhfkjshd

Implementierung dieser Variante

Implementierung der Layouts

Variante 1

HTML:

  <div id="container1">
  <div id="container2">
  <div id="links">Linke Spalte</div> <div id="rechts">Rechte Spalte</div> <div id="mitte"> <h3>Mitte</h3> skjdhsjdhf... </div>
 <div id="clear">Abstandhalter</div>
 </div> </div>

CSS:

#container1 { 
background-color: #fcc; /* Farbe fuer mittlere Spalte */
background-image:url(layout-links-bg.png); /* HG-Grafik fuer linke Spalte */ background-repeat: repeat-y;
} #container2 {
background-image:url(layout-rechts-bg.png); /* HG-Grafik fuer rechte Spalte */ background-repeat: repeat-y; background-position:right;
} #links { float:left; width:198px; } /* Breite + 2 * 1px padding = 200px */ #rechts { float:right; width:198px; } /* s.o. */ #mitte { margin-left:200px; margin-right:200px; }
#links, #rechts, #mitte
{ padding:1px } /* Collapsing margins verhindern */ #clear { clear:both; }

Erklärung: Das Layout wird von zwei Containern eingeschlossen. Der äußere Container, Container1, wird auf die Hintergrundfarbe der mittleren Spalte gesetzt, und enthält zusätzlich die Hintergrundgrafik für die linke Spalte. Container2 enthält die Hintergrundgrafik für die rechte Spalte. Beide Grafiken werden senkrecht wiederholt und können daher eine beliebig kleine Höhe haben. Der Rest funktioniert wir ein übliches Layout mit float-Technik: Die linke und die rechte Spalte schweben links bzw. rechts, der Inhalt im div "#mitte" fließt um sie herum.

Das div mit dem Text "Abstandhalter" trägt die "clear:both"-Eigenschaft, damit sich der äußeren Container in jedem Fall über die gesamte Höhe des Bereichs erstreckt. Der Text "Abstandhalter" soll verhindern, dass dieses Element aus Versehen gelöscht wird, und kann vor dem Publizieren entfernt werden. Das div muss aber stehen bleiben.

Das padding von 1px bei allen drei Spalten-divs ist wichtig, um zu verhindern, dass margins aus dem inneren der Spalten nach außen dringen und somit die Positionierung des Layouts stören können. Dies ist bei allen drei Varianten so definiert. 

Variationen:

Nur 2 Spalten: Container2 und rechte Spalte weglassen

Variante 2

HTML:

      <div id="container">
        <div id="links">Linke Spalte</div>
        <div id="rechts">Rechte Spalte</div>
        <div id="mitte">
          <h3>Mitte</h3>
          skjdhsjdhf...
        </div>
        <div id="clear">Abstandhalter</div>
      </div>

CSS:

#container { background-color: #fcc; }
#links { float:left; width:198px; }
#rechts { float:right; width:198px; }
#mitte { margin-left:200px; margin-right:200px; }
#clear { clear:both; }
#links, #rechts, #mitte { padding:1px }    
Erklärung: Im Prinzip kommt hier das Standard-Layout mit float-Technik zum Einsatz. Der äußere Container dient dazu, der ganzen Struktur eine vom rest der Seite abgesetzte Farbe zu geben.

Variationen:

wenn das Layout keine eigene Hintergrundfarbe benötigt, sondern diese z.B. im <body> gesetzt wird, kann der container auch weggelassen werden. Nach dem Layout ist aber auf jeden Fall ein Element mit "clear:both" nötig, damit der Absatzfluss unter dem Layout normal weitergeht.

Nur 2 Spalten: rechtes div weglassen, margin-rechts von mittlerem div entfernen.

Variante 3

HTML:

      <div id="container1">
        <div id="links">Linke Spalte</div>
        <div id="container2">
          <div id="rechts">Rechte Spalte</div>
          <div id="mitte">
            <h3>Mitte</h3>
            skjdhsjdhf...
          </div>
        </div>
      </div>

CSS:

#container1 { background-color:#ccf; }
#container2 { background-color:#cfc; margin-left: 12.4em }    /* 12.4em >= 12em + 2 * 1px padding */  
#links      { float:left; width:12em; }
#rechts     { float:right; width:12em; }
#mitte      { margin-right:12.4em; background-color:#fcc; }
#links, #rechts, #mitte { padding:1px }

Erklärung: Der Effekt dieses Layouts wird durch divs mit jeweils verschiedenen Hintergrundfarben erreicht, die sich gegenseitig überlagern. Die unterste Ebene, der äußere Container2, definiert die Hintergrundfarbe für die linke Spalte. Dieser wird überlagert vom kleineren Container2 mit der Farbe für die rechte Spalte, dieser wiederum vom noch kleineren div "#mitte".

Die Breite der Außenspalten ist hier relativ definiert. Die left-margin bzw. right-margin des Inhaltsbereiches sind hier auf 12.4em anstatt 12em gesetzt, um das padding von 1px der Außenspalten zu berücksichtigen. Der Wert, den man hier bräuchte, wäre eigentlich 12em + 2*1px.

Variationen:

Nur 2 Spalten: rechte Spalte und das div "#mitte" entfernen und Inhalt in Container2 schreiben.


Letzte Änderung: 01/23/13, 02:04:03 Uhr