3-Spalten-Layout

von
Post Views: 195
image_pdfimage_print

3-Spalten-Layout mit fixen Breiten

Ein 3-Spalten-Layout ist leicht umzusetzen. Hier die Angaben für das Stylesheet:

html, body {height: 100%; /* html bzw. body kann man sich als Container vorstellen,*/
            width: 800px; /*der eine bestimmte Größe hat und horizontal zentriert wird */
            margin-left:auto; margin-right:auto; margin-top:0px;}

div#links {height: 100%;
        background-color: #CCCCCC;
        width: 150px;
        float: left;}    /* float: left richtet die Box innerhalb des obigen Containers links aus */

div#rechts {height: 100%;
         background-color: #CCCCCC;
         width: 150px;
         float: right;}  /* float: right richtet die Box innerhalb des obigen Containers rechts aus */

div#inhalt {height: 100%;
         background-color: #8D8D8D;
         width: 500px;
         margin-left:auto; margin-right:auto;
		 }

Und HTML:

Zuerst wird #links, dann #rechts und als letzes! #inhalt eigefügt.

Siehe auch: http://www.css-spielereien.de/3-spalten-layout.php

Besonderheiten:

Bekommen die Boxen ein padding und/oder einen Rahmen, so müssen diese von der Breite abgezogen werden (Breite – padding – border). „Boxsizing“ funktioniert nicht.

Abstände zwischen den Boxen (horizontal) können nicht mit margin-left/margin-right realisiert werden. Die Boxen müssen einfach schmäler gemacht werden, sodass ein Abstand zwischen ihnen bliebt.

 

3-Spalten-Layout mit flexibler Breite von #inhalt

Bei html, body wird nur die Höhe angegeben:

html, body {height: 100%;}

Ebenso bei #inhalt:

#inhalt {height: 100%;
         background-color: #8D8D8D;}

Die Zentrierung kann auch wegfallen, da sich das Layout über die gesamte Breite erstreckt.

Schreibe einen Kommentar