Webmaster-Crashkurs

2-Spalten-Layout mit CSS

Für ein 2-Spalten Layout benötigen wir 2 Container. Da üblicherweise in einem Container die Steuerung sitzt, wird dieser #steuerung benannt, die zweite Spalte bekommt den bezeichnenden Namen #zweite_spalte

2-Spalten Layout in CSS

Unser minimales HTML sieht also wie folgt aus:

<div id="steuerung">
	Hier Steuerung
</div>

<div id="zweite_spalte">
	Hier unser Inhalt
</div>

Damit wir sehen, wo wir arbeiten, bekommen beide Elemente eine Hintergrundfarbe zugewiesen. Während der Entwicklungszeit ist das immer eine gute Idee. Denn im Nebel stochern ist nicht effektiv.

#steuerung {
	background-color: yellow;
}

#zweite_spalte {
	background-color: green;
}

Wenn wir uns den bisherigen HTML-Code in einem Browser ansehen, kommen die 2 Blockelemente untereinander, da diese jeweils die komplette Breite nutzen. Also gewöhnen wir den Blockelementen als erstes einmal diese raumgreifende Eigenschaft ab. Der Bereich für die Steuerung bekommt eine feste Breite von 150 Pixeln zugeteilt.

#steuerung {
	background-color: yellow;
	width: 150px;
}

Schauen wir uns wieder das Ergebnis unserer Bemühung an. Jetzt ist der Bereich für die Steuerung 150 Pixel breit, wie wir es festgelegt haben. Allerdings interessiert sich dafür unser Bereich #zweite_spalte herzhaft wenig. Er ist immer noch unter dem Element #steuerung und nutzt die komplette Breite. Also müssen wir ihm noch sagen, dass er sich auf die Höhe des Elements #steuerung begeben soll. Unser Element #steuerung bekommt also ein float:left; zugewiesen.

#steuerung {
	background-color: yellow;
	width: 150px;
	float:left;
}

Jetzt schaut es schon ganz brauchbar aus. Allerdings wird Inhalt des Bereichs #zweite_spalte lustig um das Element #steuerung herum fließen. Sobald also mehr Inhalt im Bereich #zweite_spalte steht, wird dieser dann auch Unterhalb von #steuerung sich befinden. Das sieht bei einem 2-Spalten-Layout nicht wirklich nach 2 Spalten aus. Probieren Sie es unbedingt aus!

Um das 2-Spalten-Layout wie gewünscht zu erstellen, wird nun dem Bereich #zweite_spalte ein Abstand nach links mitgegeben über:

#steuerung {
	background-color: yellow;
	width: 150px;
	float:left;
}

#zweite_spalte {
	background-color: green;
	margin-left: 200px;
}

Dieser Abstand sollte größer sein, als der von der Steuerung benötigte Platz. Unserer Steuerung wurden 150 Pixel zugeteilt, somit passen die 200 Pixel Abstand für die zweite Spalte.

Möchte man nun noch eine feste Breite für den Bereich #zweite_spalte kann das über width: mitgegeben werden. Im Beispiel geben wir eine Breite von 300 Pixeln mit:

#steuerung {
	background-color: yellow;
	width: 150px;
	float:left;
}

#zweite_spalte {
	background-color: green;
	margin-left: 200px;
	width: 300px;
}

Probleme von 2-Spalten-Layout mit CSS

Ein Problem von 2-Spalten-Layout mit CSS tritt auf, sobald nicht genügend Platz vorhanden ist. Das können Sie sehr einfach probieren, indem das Fenster des Browsers verkleinert wird. Sobald der Platz nicht mehr ausreicht (in unserem Beispiel 200 + 300 = 500 Pixel in der Breite) bricht unsere zweite Spalte um und ist wieder unter dem Bereich der Steuerung zu finden. Das war es dann wieder mit unserem 2-Spalten-Layout.

Um dieses Problem bei 2-Spalten-Layout nicht zu haben, werden um beide Bereiche ein weiterer Bereich gepackt, gerne als Wrapper bezeichnet. Diese Bezeichnung kommt von dem englischen „to wrap“ und der Bedeutung wickeln bzw. einhüllen. Das passiert auch mit unseren beiden Elementen. Diese werden von unserem Element #wrapper eingehüllt. Und diesem „einhüllenden“ Element geben wir nun eine Breite mit, die größer ist also die beiden inneren Elemente notwendig haben. Also z.B. 501 Pixel.

Unser HTML-Code mit dem Wrapper:

<div id="wrapper">
    <div id="steuerung">
	Hier Steuerung
    </div>

    <div id="zweite_spalte">
	Hier unser Inhalt
    </div>
</div>  <!-- hier ist das Ende des Elements Wrapper -->

Und im CSS wird die Breite des Wrappers definiert (dem wir auch eine Hintergrundfarbe mitgeben):

#wrapper {
	background-color: lightblue;
	width: 501px;
}

#steuerung {
	background-color: yellow;
	width: 150px;
	float:left;
}

#zweite_spalte {
	background-color: green;
	margin-left: 200px;
	width: 300px;
}

2-Spalten-Layout relativ

Für die Profils und Liebhaber von relativen Maßeinheiten kann man das Spiel auch noch mit relativen Maßeinheiten angehen. Das ist natürlich klasse, wenn die Größen der Schriften und das Design skalierbar sind. Probieren Sie es und erweitern folgendes Beispiel mit dem Wrapper

#steuerung {
	background-color: yellow;
	width: 14em;
	float:left;
}

#zweite_spalte {
	background-color: green;
	margin-left: 16em;
}
HTML5-Video-Kurs:
hier klicken für
mehr Informationen
© 2008-2024   •   www.webmaster-crashkurs.de - HTML5 Tutorial mit Videos • Impressum • Datenschutzerklärung
weitere eigene Projekte: