Mindestabsatzbreiten in flexiblen Layouts

Ein schwebendes Bild nimmt horizontalen Raum vom Text weg, der darum herumfließt. In Layouts mit fester Breite können Sie überprüfen, ob der für den Text verbleibende Platz ausreicht, um eine ansehnliche Spalte zu erstellen, und Sie wissen, dass alle anderen dasselbe sehen werden.

In einem flexiblen Layout haben Sie jedoch keine solche Garantie. Wenn ein Benutzer Ihre Website auf einem kleineren Gerät anzeigt, reicht der für den Text verbleibende horizontale Platz möglicherweise nur für ein oder zwei Wörter pro Zeile. Eine so schmale Textspalte sieht nicht nur hässlich aus; sie ist auch fragil. Ein Satz mit einem langen Wort wird aufgeteilt, wenn das lange Wort unter das schwebende Bild rutscht und mitten im Satz leeren Raum hinterlässt.

Die schwer fassbare Mindestabsatzbreite

Um das Problem zu schmaler Absätze zu lösen, benötigen wir eine Möglichkeit, eine Mindestabsatzbreite zu implementieren. Wenn der durch das schwebende Bild verbleibende Platz unter dieser Breite liegt, wird der gesamte Absatz darunter verschoben.

Intuitiv scheint die folgende CSS-Regel passen:

p {
  min-width: 10em;
  /* For demonstration */
  border: 1px solid red;
}

Dies hat jedoch keine Auswirkung. Das Bild schwebt über dem Absatz und reduziert somit nicht die „offizielle“ Breite des Absatzes. In der Zwischenzeit weicht der Text innerhalb des Absatzes pflichtbewusst aus, um Platz für das schwebende Bild zu schaffen, und das Problem bleibt bestehen.

Die Media-Query-Lösung für bekannte Bildbreiten

Wenn Ihre Bilder (oder andere schwebende Inhalte) eine feste und vordefinierte Breite haben, können Sie CSS3-Media-Queries verwenden, um das Schweben bei Bildschirmgrößen zu deaktivieren, die zu schmal sind, um sowohl ein Bild als auch eine Textspalte nebeneinander zu platzieren.

Diese Lösung funktioniert natürlich nur in Browsern, die CSS-Media-Queries unterstützen. Für andere Browser wird die Lösung zum ursprünglichen Problem zurückgeführt.

@media screen and (max-width: 400px) {
  img {
    float: none;
  }
}

Allgemeine Lösung mit Pseudo-Element

Die Media-Query-Lösung funktioniert nicht, wenn die schwebenden Elemente beliebige Breiten haben, und ist auch nicht sehr elegant.

Eine bessere Lösung ist, jedem Absatz ein unsichtbares CSS-Pseudo-Element mit der gewünschten Mindestabsatzbreite zu geben. Wenn nicht genügend Platz vorhanden ist, um dieses Pseudo-Element unterzubringen, wird es unter das Bild geschoben und nimmt den Absatz mit.

Diese Lösung wird von den meisten Browsern unterstützt. In älteren Browsern fällt die Lösung dankend auf das ursprüngliche Problem zurück.

p:before {
  content: "";
  width: 10em;
  display: block;
  overflow: hidden;
  /* For Demonstration */
  border: 1px solid green;
}

Der grüne `border` des Pseudo-Elements dient nur zur Veranschaulichung. Er ist für die Lösung nicht erforderlich und sollte in Ihrem Code entfernt werden. Das Pseudo-Element nimmt dann überhaupt keinen vertikalen Platz ein.

Demo & Download

Demo ansehen   Dateien herunterladen

Über den Autor

Gustav Andersson ist der Autor von The Modern Nomad, einer Website, die nomadische Lebensstile erforscht und Menschen ermöglicht, überall und jederzeit zu leben und zu arbeiten. Er ist ein Tango-tanzender, Bullenreiten-könnender, Grammatik-liebender Burner, der Sie inspirieren möchte, ein Leben ohne Adresse in Erwägung zu ziehen.