ʫ

Sie haben den Artikel erfolgreich in den Warenkorb gelegt.
Was möchten Sie als nächstes tun?

Weiter einkaufen Zur Kasse

Ohne Höhenangabe eine Div Ebene durch Inhalt spannen

Ein heißer Tipp für Programmierer, die mit CSS kämpfen - lernen Sie hier wie Sie eine

Ebene durch den eigenen Content spannen lassen können, wenn diese Ebene nach links oder rechts per float ausgerichtet wird.

Problematik - div Ebenen spannen nicht durch den Text, der enthalten ist, wenn keine feste Höhe eingestellt ist.

Wenn Sie eine div Ebene ohne jegliche CSS Angaben mit Text füllen, so sehen Sie normalerweise den vollen Text. Wenn Sie der Ebene ein float: left oder float: right per CSS verpassen, so sehen Sie in der Regel nichts mehr, denn die

Ebene keine Höhenangabe hat und durch den float der überfließender Text keine automatische Höhenspannung verursacht. Hier müssen wir mit CSS handeln.

Floating Div Ebene durch den eigenen Inhalt in der Höhe spannen - Lösung

Wenn eine Ebene per float nach links oder rechts ausgerichtet ist, so müssen Sie explizit per CSS definieren was mit den Inhalten passieren, die über die aktuelle Höhen- und Breitenangabe der Ebene hinausgehen. Hierfür ist die CSS Eigenschaft overflow benötigt. Sie müssten auf jeden Fall fest den overflow Wert definieren:

overflow: hidden;

Oberer CSS Befehl sagt - spann dich aufgrund des Textes hoch, ohne jegliche Scrollbalken oder sonstiges zu zeigen.
Hier ein Beispiel:

Satz 1
Satz2

Nun sehen Sie beide Zeilen.

Tipps zur floating Divs:

  • Wenn Sie gerne mit 3 Div Ebenen drei Spalten erreichen möchten, so achten Sie darauf, dass zuerst im Code die floating Divs kommen und dann die mittlere Spalte, die sich an die Breite, Höhe und Position der floating Divs orientiert und einfach dazwischen bleibt.
  • Versuchen Sie immer die floating
    Ebenen in eine nicht floating Ebene unterzubringen um sicherzustellen was an welcher Stelle die Ebenen ausgerichtet werden und bei der nächsten Zeile nicht alle Ebenen weiter floaten.
  • Sie können generell in Ihrer CSS Datei allen Divs die overflow: hidden Eigenschaft per Standard vergeben:

    div {overflow: hidden;}

Viel Erfolg!

û