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.


33 Kommentare

  • Malte Reiter

    Auch wenn ich keine Ahnung vom Programmieren habe, das Video erklärt die Schritte super anschaulich. Sehr gut finde ich auch, dass die Tonqualität TOP ist, was leider bei vielen Videotutorials, egal welches Genre, meist nicht so ist.

  • Daniel

    Interessant. Normalerweise hat man ja das Problem, dass alles untereinander dargestellt wird. Oder eben nicht so, wie man will 😉
    Werde mir mal das Paket angucken, wird mir hoffentlich weiter helfen.

    An dich: Super Video, interessanter Inhalt. Aber wieso zur Hölle verwendest du Macintosh ? 😀

    @Malte: HTML und CSS sind nur Script-Sprachen, keine Programmiersprachen. Daher programmiert man auch streng genommen keine Website in HTML & CSS, sondern man programmiert eine Website z.B. in PHP. Was aber nicht gerade einfacher wird, nur interessanter !

    Danke fürs Video! Mach so weiter.

    • Pascal Kremp

      Hi Daniel,
      und danke für deinen positiven Kommentar!

      Mehrere Gründe, die für mich für einen Mac sprechen:
      Ich brauchte ein Laptop, welches geil aussieht und Retina zum arbeiten ist super angenehm.
      Viele gute und bekannte Entwickler arbeiten mit Mac. Der Workflow ist um einiges angenehmer und schneller.
      Die Programme für Entwickler für Mac sind ziemlich geil. Ein Beispiel: http://incident57.com/codekit/
      Ohne das geht gar nicht mehr!

      Der Gedanke, dass es viele Programme für Mac nicht gibt, ist sehr veraltet!

      Gruß & ich mach weiter!

  • Phasenkasper

    Schönes Video. Wenn ich mal wieder das Problem habe, werde ich mich daran erinnern.
    Kann du vielleicht mal ein Video/Beitrag zu Sublime machen. In dem Video hast ein bisschen was eingetippt und schon war der HTML-Code da. Würde mich mal interessieren wie das geht.

  • Lucifer112

    Genial, jetzt hab sogar ich es Verstanden!

  • Marcus

    Hi Pascal, tausend Dank für diese schöne und einfache Lösung und schade das du kein flattr-Button hast ich hätte dir gerne was gegeben 🙂

  • René Meschuh

    Servus Pascal! Danke für die gute Erklärung – ist eher selten, dass man auf Anhieb den Ausführungen folgen kann.

  • Oliver

    Danke 🙂 Jetzt weiß ich auch mal, was overflow und clear so richtig bedeutet 😉

    -Grüße, Oliver

  • HTML Nutte

    Danke, jetzt weiß ich wie man nebeneinander fickt. Nuttenficker007

  • Minding

    Hi,

    ich versuche ein div mit zwei inputs in der Ecke rechts unten mit floating zu machen.

    Ecke rechts unten:

    .corner {

    position: absolute;

    bottom: 0;

    right: 0;

    margin: 5px;

    }

    Wenn ich dem div jedoch zusätzlich die Klasse corner zuweise bringt der clearfix nix mehr! (das liegt am position: absolute;)

    Wie kann ich das Lösen?

    -Minding

  • Noel

    Man kann auch jedem ausser den letzten DIV-Container den Styleattribut „float: left“ geben. So musst man keine weiteren Klassen setzen.

  • ADD A COMMENT