In dieser Rubrik werde ich künftig das ein oder andere Tutorial zu Themen veröffentlichen, welche öfter mal nachgefragt werden. Im ersten CSS-Basics-Tutorial zeige ich, wie ihr drei gleichgroße Elemente nebeneinander mit einer Breite von 100% anordnet.

Um den Schwierigkeitsgrad noch etwas zu steigern, zeige ich auch Möglichkeiten auf, wie dies mit Elementen, für welche ein Außenabstand definiert ist, funktioniert.

Okay, fangen wir an. Wir haben drei identische Elemente:

<div class="box">Blablablub</div>
<div class="box">Blublubla</div>
<div class="box">Blablubla</div>

Diese haben wir wie folgt definiert:

.box {
	padding: 20px;
	background: #eee;
}

Als Ergebnis bekommen wir dies:

Um die Elemente nun nebeneinander anzuordnen, müssen wir sie floaten, also den Textfluß verändern. Wir ergänzen dazu folgendes:

.box {
	float: left;
	padding: 20px;
	background: #eee;
}

und die Elemente sind so angeordnet, wie wir es wollen:

Unser Ziel ist es, die Elemente auf eine Breite von 100% zu verteilen. Die einfachste Möglichkeit: wir geben jedem Element eine feste Breite:

.box {
	float: left;
	width: 33.33333%;
	padding: 20px;
	background: #eee;
	box-sizing: border-box;
}

und hätten so nahezu 100%. Damit der Innenabstand (padding) keine Auswirkungen auf die Größe der Elemente hat, haben wir noch box-sizing hinzugefügt.

So weit so einfach. Das funktioniert perfekt für Elemente ohne Hintergrundfarbe oder Außenabstand.

Wenn wir aber Elemente mit einem Hintergrund haben, möchten wir aus optischen Gründen vermutlich auch einen gleichmäßigen Außenabstand zwischen den Elementen.

Dazu könnten wir jedem Element eine Breite von 30% und einen Außenabstand von 3.33333% nach rechts geben:

.box {
	float: left;
	width: 30%;
	margin-right: 3.33333%;
	padding: 20px;
	background: #eee;
	box-sizing: border-box;
}

Damit wären wir zwar bei 100% Breite, allerdings erhält auch das letzte Element einen Außenabstand nach rechts:

Um den Außenabstand vom letzten Element zu entfernen, hätte ich zwei Lösungen parat.

Wir könnten jedem der drei Elemente eine separate Klasse zuweisen:

.box1, .box2, .box3 {
	float: left;
	width: 32%;
	margin-right: 2%;
	padding: 20px;
	background: #eee;
	box-sizing: border-box;
}

und den Außenabstand für das dritte Element abweichend festlegen:

.box3 {
	margin-right: 0;
}

Ihr seht, wir haben den Außenabstand des letzten Elements bereits in die Breite und den Außenabstand der anderen beiden Element eingerechnet. Wenn ich richtig gerechnet haben, kommen wir so auf die volle Breite.

Natürlich nicht vergessen die Elemente im Quelltext entsprechend anzupassen:

<div class="box1">Blablablub</div>
<div class="box2">Blublubla</div>
<div class="box3">Blablubla</div>

Zweite Möglichkeit: wir bedienen uns des Pseudoelements :last-child und sprechen damit gezielt das letzte Element an. Dazu definieren wir:

für alle Elemente:

.box {
 float: left;
 width: 32%;
 margin-right: 2%;
 padding: 20px;
 background: #eee;
 box-sizing: border-box;
}

und speziell für das letzte (dritte) Element:

.box:last-child {
	margin-right: 0;
}

Das perfekte Ergebnis:

Bleibt dran. Bald gibt’s weitere Basics.