3-Spalten-Layout

3-Spalten-Layout

Mehrspaltige Layouts ohne Tabellen gestalten. Hier werden Lösungsansätze mit DIV-Layern und CSS erklärt, die zur Erstellung eigener Templates dienlich sein können. (inkl. "Faux Columns")
Anm: Es wird nur die Grundstruktur erklärt. Es handelt sich nicht um eine komplette Anleitung für ein Joomla-Template!

1. Basisvariante:

Im Grunde ist die Erstellung eines dreispaltigen Layouts sehr einfach:

CSS-Code:

#container { border: 1px solid #000; margin: auto; width: 830px; }
#left { float: left; width: 200px; background-color: #5E81B1; padding: 5px; }
#content { float: left; width: 400px; background: #DFE6EF; padding: 5px; }
#right { float: right; width: 200px; background: #B4C4DA; padding: 5px; }           
.clr { clear: both; }

HTML-Code:

<div id="container">
    <div id="left">text left</div>
    <div id="content">text content</div>
    <div id="right">text right</div>
    <div class="clr"></div>
</div>

Zu berücksichtigen sind lediglich folgende Punkte:
Da bei allen Spalten-DIVs ein float gesetzt ist, muss vor Abschluss des Container-DIVs  ein  class="clr"-Layer  eingefügt werden, damit sich der Container (mit Rahmen) um den gesamten Bereich zieht.
Bei der Breite des Containers müssen die Padding-Abstände mitberechnet werden.

Preview: Beispielseite
(Anm.: CSS und HTML können auch aus dem Sourcecode der Beispielseiten kopiert werden.)

Der Unterschied zu normalen Tabellen ist anhand der Preview schnell ersichtlich: Die DIV-Layer gehen in der Höhe immer nur nach dem Inhalt. Die Hintergrundfarben erstrecken sich also nicht über den gesamten Bereich der optischen "Tabelle".

2. Spalten-Struktur mit Hintergrundgrafik ("Faux Columns"):

Falls man alle "Spalten" der "Tabelle" farblich auffüllen möchte, empfiehlt sich folgende Lösung.
Man legt eine Grafik als Hintergrund in den Container-DIV. Breite entspricht die des Containers ("Tabelle"), als Höhe kann 1 Pixel reichen, denn mittels CSS-Befehl "repeat-y" wird das Bild vertikal wiederholt angezeigt (bis zum Ende des Containers). Bei den anderen DIV-Layern kann nun die Hintergrundfarbe weggelassen werden.
Diese Lösung ist auch als "Faux Columns" (unechte Spalten) bekannt.

CSS-Code:

#container { 
	border: 1px solid #000; 
	margin: auto; 
	width: 830px; 
	background: url(../folder/spaltenback.gif) repeat-y;
}
#left { float: left; width: 200px; padding: 5px; }
#content { float: left; width: 400px; padding: 5px; }
#right { float: right; width: 200px; padding: 5px; }           
.clr { clear: both; }

Der HTML-Code ist gleich zum oben angeführten Beispiel.

Preview: Beispielseite

3. Verschachtelte DIV-Layer:

Folgender Ansatz soll demonstrieren, wie man die vollflächigen Hintergründe auch umsetzen kann.
Dieser Lösungsweg hat aber einen großen Nachteil: Er funktioniert nur einwandfrei, wenn im mittleren Bereich der meiste Inhalt steht.
Die einzelnen DIV-Layer sind untereinander verschachtelt. Sowohl linke als auch rechte "Spalte" dehnen sich vertikal mit dem Inhalt des Mittelteils. Inhalte liegen teilweise in zusätzlichen DIVs.

CSS-Code:

#container { border: 1px solid #000; margin: auto; width: 830px; }   
#left { background-color: #5E81B1; }
#left_inner { float: left; width: 200px; padding: 5px; }   
#right { float: right; width: 620px; background: #B4C4DA; }   
#right_inner { float: right; width: 200px; padding: 5px; }   
#content { float: left; width: 400px; background: #DFE6EF; padding: 5px; }   
.clr { clear: both; }

HTML-Code:

<div id="container">
    <div id="left">
        <div id="left_inner">text left</div>
        <div id="right">
            <div id="content">text content</div>
            <div id="right_inner">text right</div>
        </div><!--end right-->
        <div class="clr"></div>
    </div><!--end left-->
</div><!--end container-->

Preview: Beispielseite