Zentriertes Layout mit drei Spalten - CSS

Hallo Tutorianer!

Auf Anregung von Liro in der Tutorials-Wunschliste (http://www.tutorials.de/forum/tutori...er-layout.html) möchte ich in diesem Tutorial kurz die Umsetzung eines dreispaltigen CSS-Layouts mit horizontaler Zentrierung erläutern.

Was benötigen wir als Zutaten?

HTML-Code:

            
                    Code:
                  
                   	<div id="wrapper" class="clearfix">
     <div id="leftCol">leftCol</div>
     <div id="rightCol">rightCol</div>
     <div id="centerCol">centerCol</div>
</div>

CSS-Code:

            
            
              
                
                  
                    Code:
                  
                

                  
                   	* { /* Mit dem Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
margin: 0;
padding: 0;
}

body {
text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */
}

div {
text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}

/* DIV-Boxen */

div#wrapper {
width: 800px;
margin: 0 auto; 
border: 1px solid #b8b8b8; 
}

div#leftCol {
float: left; 
width: 200px;
background: #e2e2e2;
}

div#rightCol {
float: right; 
width: 200px; 
background: #e2e2e2;
}

div#centerCol {
margin: 0 200px; 
}

/* clearfix zum Aufheben der Floatumgebung */

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
                  
                

              
            
          

Das DIV #wrapper dient zur Aufnahme der Spalten-Blöcke. Es erhält eine feste Breite (hier: 800px) und wird mittels margin:0 auto im Anzeigebereich horizontal zentriert.

(Anmerkung: Da der IE5.01 und 5.5 wegen mangelnder Unterstützung des Boxmodells mit der margin-Deklaration nichts anzufangen wissen, setzen wir text-align:center im body-Element ein, damit sie die Box im Fenster horizontal zentrieren. Im Gegenzug wird in allen DIVs mit text-align:left die Textausrichtung linksbündig gesetzt, da sie ansonsten die Regel aus dem übergeordneten body-Element vererbt bekommen.)

In ihm werden die drei Spaltenblöcke (#leftCol, #rightCol, c#enterCol) platziert und im HTML-Quelltext auch in dieser Reihenfolge genannt / notiert: zuerst die beiden äußeren Spalten mit der jeweiligen float-Eigenschaft und anschliessend die Mittlere, die mit margin:0 200px die beiden float-Objekte umfliesst.

Mit der CSS-Klasse .clearfix sorgen wir dafür, dass die Floatumgebung anschliessend "gecleart" wird und so die Box #wrapper ihre wahre Höhe annimmt. (Siehe hierzu auch den Artikel http://positioniseverything.net/easyclearing.html)

Das Grundkonzept für den horizontal zentrierten Dreispalter steht damit.

Nur hat dieser einen kleinen Schönheitsfehler: Wenn die Inhalte in den einzelnen Spalten unterschiedlich groß sind, dehnen sich die Boxen in ihrer Höhe unterschiedlich aus und reichen nicht gemeinsam bzw. einheitlich bis zum unteren Rand des Elternelements.

Diese Klippe lässt sich mit Hilfe der "Faux-Columns-Technik" umschiffen, indem wir eine Grafik erstellen, die der Breite des Layouts entsprechend dimensioniert ist (hier: 800*1px), und dem DIV #wrapper als vertikales Hintergrundbild zugewiesen wird.

In der Grafik wird der Hintergrund (oder ein vertikaler Rahmen) für die Spalten eingearbeitet, womit im Stylesheet die zunächst deklarierte Hintergrundfarbe der äußeren Spalten #leftCol und #rightCol entfällt, da jetzt durch die vertikale Bildwiederholung die Spaltenhintergründe "generiert" werden. Auf diese Weise besitzen die Spalten unabhängig von ihrem Inhaltsumfang automatisch die gleiche Höhe.

Das Stylesheet für die DIVs #wrapper, #leftCol und #rightCol lautet nun folgendermaßen:

            
                    Code:
                  
                   	div#wrapper {
width: 800px;
margin: 0 auto;
border: 1px solid #b8b8b8;
background: url(3cols.png) repeat-y;
}

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

div#rightCol {
float: right;
width: 200px;
}

Das vollständige Beispiel mit zwei Varianten (Hintergrund / Rahmen für die Spalten) hänge ich hier als ZIP-Datei an.

mfg Maik