Pascal Kremp

Wie du mit HTML & CSS div-Elemente richtig nebeneinander ausrichten kannst

1 minute

Ich muss zugeben, dass auch ich anfänglich meine Probleme hatte Divs richtig nebeneinander anzuordnen. Suchst du nach einer Lösung für dieses Problem, findest du in der Regel altmodische und unschöne Lösungen, die nicht in jedem Browser ihren Zweck erfüllen. Im folgenden Video erkläre ich, wie man mit der etablierten clearfix-Methode dem Grauen ein Ende bereitet:

Das Video kurz zusammengefasst

1. clearfix-Klasse in eine CSS-Datei einfügen und einbinden
Folgenden Code in eine CSS-Datei einfügen:
[code].clearfix:before,
.clearfix:after {
content: ” “;
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}[/code]

2. Wrapper erstellen und clearfix-Klasse hinzufügen
Alle Elemente, die nebeneinander angeordnet werden sollen, mit einem Element umschließen und dieses mit der Klasse clearfix versehen.

3. Floaten und Breitenangabe
Die zu floatenden Elemente mit float:left oder float:right ausrichten und mit einer Breitenangabe versehen.

[code]
<style>
.clearfix:before,
.clearfix:after {
content: ” “;
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}

.left {
float: left;
width: 33%;
}
</style>

<div class=”clearfix”>
<div class=”left”>TEST</div>
<div class=”left”>TEST</div>
<div class=”left”>TEST</div>
</div>[/code]

Die clearfix-Methode wird in dem Framework HTML5 Boilerplate verwendet und findet Anklang bei den großen Seiten wie Facebook und Twitter.

Hat dir diese Methode das Leben als Webentwickler erleichtert? Oder funktioniert es immer noch nicht, so wie du es dir vorstellst? Nutze die Kommentarfunktion und ich werde dir helfen.