Sie sind hier: Startseite · Artikel · CSS: Float

Mindestbreite von Text neben gefloateten Bildern

Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.

Das letzte offene CSS-Problem gelöst?

Nein, bestimmt nicht das letzte. Aber ein Problem, mit dem ich mich schon lange herumplage.

Worum genau geht es?

Hier ist das Problem zu sehen. Was passiert da? Die Wörter "Auf", "Seite" und "36" sind kurz genug, um neben dem Bild zu floaten. Das Wort "schreibt" ist breiter als der neben dem Bild verfügbare Raum. Also wird ab diesem Wort der Text unter das Bild geschoben. Es bleiben "Auf", "Seite" und "36" quasi als Waisen.
(Originalfoto: Ursula Groß)

Bilder von Text umfließen lassen. In den 90er-Jahren hat man das mittels Layout-Tabellen gelöst. Mit der Einführung von CSS ging es eleganter: mittels der Anweisung float:left bzw. float:right. Das war auch gut so, so lange PC-Monitore immer größer wurden. Seit einigen Jahren werden sie jedoch kleiner; sehr klein sogar. Stichwort: Tablets und Smartphones. Und plötzlich tauchte ein neues Problem auf: Je nach Breite des Bildes und Monitorbreite kann es passieren, dass nur noch ein Teil des Textes neben dem Bild floatet, und der Rest des Textes sich unter das Bild schiebt. Der Screenshot illustriert das Problem.

Und das ist die gewünschte Darstellung. Wenn die neben dem gefloateten Bild verbleibende Breite ein Mindestmaß unterschreitet, wird nicht mehr gefloatet.
Diese Mindestbreite sollte auch so festgelegt werden, dass flüssiges Lesen sichergestellt ist. Stichwort: Zeilenlänge Typographie

Die zeitgemäße Lösung: CSS-Flex oder Gridbox. Was aber, wenn diese Möglichkeit verbaut ist, z.B. wenn es um das Aufpeppen eines alten Projekts mit Hunderten von Seiten geht?
Mit CSS alleine kann man das leider nicht lösen. Alle Versuche mit min-width o.ä. scheitern, weil das geete Bild sich quasi über das folgende Element (hier: Text) legt, die Breite des Textelements aber unverändert bleibt. Sollte tatsächlich jemand eine CSS-only-Lösung kennen: Bitte in die Kommentare. Ich gebe ein Bier aus!

Die Lösung

Die gefloateten Elemente (Bilder, Divs mit Bildern und Bildbeschreibungen o.ä.) haben Klassen wie .bild_links, .bild_rechts usw.
Mit jQuery wird nun unter alle Elemente der Klasse .bild_irgendwas ein Div mit der Klasse .minwidth eingefügt. (Mit plain JavaScript wären das ein paar Zeilen mehr.)

$(function() { $("[class^=bild_]").after('<div class="minwidth"></div>'); });

Diese Klasse erhält das CSS

.minwidth {min-width:14em;overflow:hidden; }

Das war's auch schon!

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.

1. bUTschy schrieb am Donnerstag, 08.11.18 20:36 Uhr:

   hi Fritz,

   der Beitrag ist zwar schon was her, aber ich würde mir eine Lösung zutrauen und nicht nur weil ich so Biergeil bin ;)

   Stichwort: CSS Media Queries

   gruß bUTschy (butschy.de)

2. ThomasT schrieb am Montag, 15.08.22 23:14 Uhr:

   Hi,
   kurze Wörter erscheinen neben dem Bild, ab einer bestimmten Wortlänge wird unterhalb des Bildes weitergschrieben. Also bildet man das längste zulässige Wort, setzt es an den Anfang des Textes und verbietet Silbentrennung
   <p><span style="hyphens: none"; >Auf&nbsp;Seite&nbsp;36</span> weiter im Text ... </p>

   Ist mit klar, dass das höchsten für ein Kölsch reicht. :-)