CSS: Text *unter* Bild umbrechen

**nyphis** · 19-12-2011, 22:34

Moinsens,

ich habe von einem Kunden ein etwas schwierigeres Problem auf den Tisch bekommen.

Ausgangssituation: der Kunde wünscht eine Seite mit jeder Menge Text und einem großen Bild an der rechten Seite - so weit, so gut ...
Das Bild soll ca. 45% vom div groß sein und der Text soll links neben dem rechtsbündigem Bild fließen - auch alles noch in Ordnung

Nun soll aber, wenn das div nicht breit genug ist (kleiner Bildschirm, Browser nicht auf Vollbild), der Text nicht elendig schmal neben dem Bild erscheinen sondern ab einer bestimmten Breite nach unten rutschen.
Oder andersrum gesagt, ist der Bildschirm zu klein haben wir oben das Bild und unten den Text. Wird der Bildschirm größer soll das Bild nach rechts rutschen und der Text nach oben neben das Bild.

Ich habe an der Stelle schon eine Weile gebastelt - viel ausprobiert mit div in div und CSS-Positionierung - aber so richtig will es mir nicht gelingen, diesen Wunsch umzusetzen.

Ich hatte auch schon dran gedacht, zwei divs zu erstellen, die inline dargestellt werden (1. Bild, 2. Text) - wenn man die mit einer bestimmten Mindestbreite versieht, sollte der Browser ja irgendwann mal das div mit dem Text in die nächste Zeile umbrechen - aber auch das will mir nicht so recht gelingen.

Hat von Euch vielleicht jemand einen Tipp, wie man das umsetzen kann?

**undefined** · 03-01-2012, 15:43

Und genau deshalb - weil du div verwendest wird es dir nicht gelingen.
Lese die Referenzen zu div auf W3C - Speziell das Thema Element Attribute Vererbung

Wenn man um ein Bild Text Fliesen lassen möchtest, reicht es voll und ganz aus das Prädikat align im img Element zu setzen. Den Rest macht der Browser

**jeebee** · 03-01-2012, 17:02

Alternativ (falls CSS3 ok ist / du jQuery brauchen kannst) könntest du auch media selectors ausprobieren (http://webdesignerwall.com/tutorials/css3-media-queries).

Beispiel: http://people.vis.ethz.ch/~simon/img-float.html

edit: das Beispiel demonstriert media selectors und funktioniert in allen aktuellen Browsern (ausser IE<=8.0) ohne jQuery.
edit2: du kannst auch das img div weglassen und direkt das betreffende img-tag mit float:right/float:none stylen.

**undefined** · 03-01-2012, 22:46

ich bin Sprachlos - Ihr kennt noch nicht mal die ältesten Positionierungs Tricks für html img und bastelt Umständlich einen mit div.

Code:

<p>
  <img .... align="right" />
  viel text
</p>

http://xhtmldbg.hjcms.de/plugintests...efloating.html

**jeebee** · 04-01-2012, 09:12

und wie passt du

Code:

align="right"

mit media queries für kleine Bildschirme an?

btw:
align für img-tags ist deprecated für HTML 4.01 und nicht supportet in HTML 4.01 Strict / XHTML 1.0 Strict / HTML5 --> ist der älteste Trick, den man nicht mehr brauchen soll.
Äquivalent und modern ist

Code:

<img style="float:right" src="..." />

**undefined** · 04-01-2012, 12:44

Willst du jetzt mit mir einen Glaubenskampf über Deprecated/Obsolete etc. führen?
Beim Webdesign geht es darum mit wenig Zeilen Zielgerecht auf allen Browsern eine gleiche Darstellung zu erreichen. Den Kunden Interessiert nur das Ergebnis und Preis, das wie ist dem Wurst.
Mal davon abgesehen. Mach mal ein Paar Performance Tests mit Verschachtelten divs versus Konventioneller Tabellen Struktur. Auf einer Single CPU mit Firefox macht das ca. 20 - 40% aus.

**jeebee** · 04-01-2012, 16:51

Es hat ja niemand von verschachtelten divs gesprochen, float:right kann auch direkt auf das img-tag angewendet werden.

Bezüglich der Geschwindigkeit: wenn ich -- weil ich align="right" brauche -- javascript einsetzen muss, um das Verhalten zu erreichen welches der TE haben will (== auf kleinen Bildschirmen soll das Bild eben gerade nicht vom Text umflossen werden), dann ist das wohl weder einfacher noch schneller als die moderne Variante mit der CSS float property und media selectors.