CSS Quelltext

CSS Tutorial: 2, 3, 4…Spaltenlayouts

Im Internet findet man viele Möglichkeiten Spaltenlayouts zu erstellen. Viele funktionieren zwar, sind aber unnötig kompliziert. Hier lernst Du mit einfachsten Mitteln Spaltenlayouts zu erstellen. Außerdem besteht hier die Möglichkeit ein 2, 3 und 4 Spaltenlayout herunter zu laden.

2 Spaltenlayout

Bild der 2 Spalten

index.html

		<div id="container1">
			<div class="inner">
				<h2>Spalte 1</h2>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
			</div> <!-- .inner -->
	    </div> <!-- #container1 -->
		
	   
	    <div id="container2">
			<div class="inner">
				<h2>Spalte 2</h2>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
			</div> <!-- .inner -->
	    </div> <!-- #container2 -->
	   
	    <div class="clear"> </div>

Zuerst legen wir 2 Bereiche fest (container1 und container2). In diese Container werden noch jeweils ein weiterer Container für den Innenabstand integriert. Am Ende muss noch mit css ein clear gesetzt werden.

style.css

/*Außen- und Innenabstände auf 0 setzen*/

* {
	margin: 0;
	padding: 0;
}  

/*Innenabstand setzen*/

.inner {
	padding: 10px;
}

/*Das umfließen beenden*/

.clear {
	clear: both;
}

/*Breite der einzelnen Container festlegen und links umfließen lassen*/

#container1,
#container2 {
            width: 50%; 
            float:left;
}

/*Hintergrundfarben definieren, damit man Container besser auseinander halten kann*/

#container1 {
	background: #ff0000;
}

#container2 {
	background: blue;
}

Wichtig für das Layout ist das floaten und die Breite, der einzelnen Container. Die Breite setzt sich aus 100% geteilt durch die Anzahl der Container zusammen. Mit diesem Prinzip kann man theoretisch unendlich Spalten erzeugen.

3 Spaltenlayout

Bild mit 2 Spalten

index.html

		<div id="container1">
			<div class="inner">
				<h2>Spalte 1</h2>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
			</div> <!-- .inner -->
	    </div> <!-- #container1 -->
		
	   
	    <div id="container2">
			<div class="inner">
				<h2>Spalte 2</h2>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
			</div> <!-- .inner -->
	    </div> <!-- #container2 -->

	    <div id="container3">
			<div class="inner">
				<h2>Spalte 3</h2>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
			</div> <!-- .inner -->
	    </div> <!-- #container2 -->
	   
	    <div class="clear"> </div>

Ein 3. Container nachdem selben Schema wurde hinzugefügt

style.css

* {
	margin: 0;
	padding: 0;
}

.inner {
	padding: 10px;
}

.clear {
	clear: both;
}

#container1,
#container2,
#container3 {
            width: 33.33%; 
            float:left;
}

#container1 {
	background: #ff0000;
}

#container2 {
	background: blue;
}

#container3 {
	background: yellow;
}

Breite ergibt sich aus 100% geteilt durch 3 Container ergibt, 33.33%. Der 3. Container wird in das style.css eingefügt.

4 Spaltenlayout

index.html und style.css siehe Download.

Bild der 4 Spalten

Herunterladen

Ein 2, 3 und 4 Spaltenlayout zum herunterladen.

Spaltenlayouts

Über den Autor:

Mein Name ist Fabian Geier, Gründer von SourceBlogging, Läufer und WordPress-Enthusiast. Du findest mich vor allen Dingen auf meiner Webseite.