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

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:

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}

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.

<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>

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.

Veröffentlicht von

Pascal Kremp

Pascal Kremp ist Unternehmer und liebt die digitale Welt. Mit seiner Agentur Pinetco hilft er Unternehmen mehr Kunden durch das Internet zu generieren.

  • 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.

    • 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!

  • 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!

    • Hi Lucifer,

      das freut mich! 🙂 Willkommen im Club.

  • 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 🙂

    • Hi Marcus, es freut mich, dass ich dir helfen konnte.

      Ich glaube du möchtest darauf hinaus:

      .row {
      margin: 0 auto;
      padding:0 20px;
      max-width: 500px;
      }

      .left {
      float:left;
      width: 80%;
      }

      .right {
      float:left;
      width: 20%;
      }

      @media only screen and (max-width: 35em) {
      .left, .right {
      width: 100%;
      }
      }

      This roxx

      Moep

      Du solltest dir http://twitter.github.io/bootstrap/ und http://foundation.zurb.com/ ansehen.

  • René Meschuh

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

    • Hi René, freut mich, dass ich dir sofort helfen konnte. Gruß

  • Oliver

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

    -Grüße, Oliver

    • Gern geschehen! Wenn du noch Fragen hast, lass es mich wissen.

  • HTML Nutte

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

    • Hallo Nutte******, vielen Dank für deinen informativen und hilfreichen Kommentar.

  • 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

    • Minding

      Nebenbei:

      Deine Seite hat einen kleinen Fehler:

      Wenn man nicht registriert ist und über den „Gefällt mir nicht“-Button fährt sind dort zwei “ zu erkennen.

      -Minding

      • Hi Minding,

        wo gibt es denn einen „Gefällt mir nicht“-Button?

        • Minding

          Unter jedem Kommentar.

          • Minding

            Oder ein *Pfeil nach unten*-Button

        • Minding

          Oh, hab noch was gefunden:

          – Wenn ich über *Pfeil hoch* fahre habe ich einen normalen ToolTipText, wenn ich über *Pfeil runter* fahre habe ich einen CSS-modifizierten ToolTipText.

          – Wenn ein Kommentar zu klein ist wird der ToolTipText oben abgeschnitten. (Der TTT erreicht diese Größe nur, wenn man nicht angemeldet ist)

          -Minding

        • Minding

          Und man kann einen Code-Abschnitt zwar ausklappen, wenn er wegen seiner Größe Abgeschnitten wurde, jedoch nicht wieder einklappen. (glaub ich)

          Ich sollte das Hauptberuflich machen 😀

          -Minding

          • Minding

            PS: Mit Code-Abschnitt meine ich einfach nur einen Kommentar, ich hatte das gerade nur so gesehen…

            -Minding

        • Minding

          ich kann gar nicht mehr aufhören…sorry, aber ich hab noch nen Fehler.
          Ich hab meinen eigenen Kommentar beantwortet und dann: (siehe Bild)

          – Da steht „in ein paar Sekunden“ statt „vor ein paar Sekunden“

          – Mein Name Fehlt nach dem Pfeil, obwohl es ein paar Kommentare drunter ging…komisch

          -Minding

          • Minding

            Bild ist hier (habs vergessen):

        • Minding

          Man kann (glaub ich keine Bilder hochlaben, wenn man nicht registriert ist)
          …ich spam leider nen bisschen…lösch die Kommentare aus DB oder so, falls sie dich nerven

          -Minding

        • Minding

          Noch eine letzte Frage:

          Warum sind die Kommentare so komisch sortiert?
          (2J, 1J, 5T, 2J…)

          -Minding

    • Hi Minding,

      Kannst du mir dein Problem hier nachbauen?

      http://jsfiddle.net/

      Dann schaue ich mir das an und kann etwas dazu sagen.

  • Noel

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