Gleichlange Spalten oder Trennlinien mit :before und :after

Wer auf Grafiken verzichten und seine Spalten dennoch gleichlang wirken lassen möchte, der kommt um die Pseudoelemente :before und :after nicht herum. In dieser kleinen Anleitung zeige ich, wie einfach es geht.

HTML-Markup

Für das nun folgende Beispiel soll ein einfaches Dreispalten-Layout mit einer Gesamtbreite von, 960 Pixel, dienen. Wobei die Außenspalten 200 Pixel breit sein sollen.

<body>
 <div id="wrapper">
  <div id="header">...</div>
   <div id="left">...</div>
    <div id="content">...</div>
     <div id="right">...</div>
      <div id="footer">...</div>
 </div>

1. Style-Angaben für #wrapper

#wrapper {
 width:960px;
 margin:10px auto;
 background:#eee;
 position:relative;
}

Die Angaben für #wrapper sollten selbsterklärend sein. Mit position:relative; wird die Voraussetzung geschaffen, die vertikalen Linien absolut positionieren zu können.

2. Style-Angaben für die Trennlinien

#wrapper:before {
 content:"";
 position:absolute;
 left:200px;
 top:0;
 bottom:0;
 width:1px;
 background:#aaa;

}
#wrapper:after {
 content:"";
 position:absolute;
 right:200px;
 top:0;
 bottom:0;
 width:1px;
 background:#aaa;
}

Mit den Pseudoelementen :before und :after werden nun die vertikalen Trennlinien platziert. Diese Linien sind im Grunde zwei Container mit einer Breite von einem Pixel. Die Angaben top:0; und bottom:0; sorgen dafür, dass sich die Linien von ganz oben bis ganz nach unten erstrecken. Die Regeln left:200px; und right:200px; entsprechen der Breite der beiden Außenspalten. Damit die Trennlinien auch angezeigt werden, ist die Angabe von content:""; zwingend notwendig. Nur das in diesem Fall keine Werte übergeben werden müssen.

So sieht es bis jetzt aus

3. Stapel-Reihenfolge von #header und #footer ändern

#header , #footer {
 position:relative;
 z-index:10;
}

Damit die Trennlinien immer unter dem #header und #footer liegen, muss mit der folgenden Anweisung die Stapelreihenfolge geändert werden. Denkt bitte daran, dass z-index nur zusammen mit position:relative oder position:absolute funktioniert.

Wem die Höhen vom Header und Footer im Vorfeld bekannt sind, kann in den Anweisungen #wrapper:before und #wrapper:after für top und bottom die entsprechenden Werte notieren. Somit ist der oben gezeigte Selektorblock unnötig.

4. Regeln für die fehlenden Container

Mit den folgenden Anweisungen werden alle erforderlichen Container formatiert. Ich gehe mal davon aus, dass hier keine weitere Erläuterung notwendig ist. Wichtig ist nur die clear:both; Anweisung im #footer, die dafür sorgt, dass sich dieser immer unter der längsten Spalte platziert.

#header {
 padding:20px;
 background:#cdc; 
 text-align:center;
}

#left {
 width:200px;
 float:left;
}

#right {
 width:200px;
 float:left;
}

#content {
 width:559x;
 float:left;
}

 
#footer {
 padding:20px;
 clear:both;
 background:#cdc;
}

/* Innenabstände für alle benötigten Elemente */
h4 , p {
 padding:10px;
}

Übrigens, wer sein Layout lieber mit floats und margins realisieren möchte, der kann hier auch auf der bekannten Clearfix-Methode zurückgreifen.

So, aber hier nun das Endergebnis

Faux Columns ohne Grafik

Mit wenigen Änderungen an den Style Angaben lassen sich auch verschiedenfarbige Spalten erzeugen. In den folgenden Angaben werde ich nur die notwendigen Änderungen ohne weitere Erläuterung entsprechend hervorheben.

1. Änderung

#wrapper:before {
 content:"";
 position:absolute;
 left:0px; /* Neue Position */
 top:0;
 bottom:0;
 width:200px; /* Neue Breite */
 background:#aaa;
}

#wrapper:after {
 content:"";
 position:absolute;
 right:0; /* Neue Position */
 top:0;
 bottom:0;
 width:200px; /* Neue Breite */
 background:#dad;
}

2. Änderung

#left {
 position:relative; 
 z-index:1;            /* Stapelreihenfolge geändert, damit der Inhalt nicht verdeckt wird */                        
 width:200px;
 float:left;
}

#right {
 position:relative;
 z-index:1;            /* Stapelreihenfolge geändert, damit der Inhalt nicht verdeckt wird */
 width:200px;
 float:left;
}

So, dies soll es gewesen sein und hoffe, dass ich euch ein bisschen weiterhelfen konnte.

Endergebnis für Faux Columns ohne Grafik

erstellt am 06.02.2012

nach oben