Text-Mindestbreite neben einem Float-Bild

[Linuchs]

Hallo,

es sieht dämlich aus, wenn man den Viewport verschmälert und dann neben dem gefloateten Bild nur ein paar kurze Worte stehen. Der Satz geht dann unter dem Bild weiter mit dem Wort, das von der Länge nicht mehr neben das Bild passt.

Nun möchte ich dem Text neben dem Bild eine Mindestbreite geben. Wenn die unterschritten wird, soll der ganze Text unterhalb des Bildes stehen.

Das hier mit der Mindestbreite fruchtet nicht:

  
<-- li = float left -->  
<img class=li src="img/irgendwas.jpg" alt="irgendwas.jpg" />  
  
<div style="min-width: 12em">  
<p class=em12><b>Potsdam.</b> &nbsp; Die Havelschipper aus Potsdam sind die ersten, die ihre Mitglieder auf dem Panorama-Foto einzeln mit Namen vorstellen.</p>  

Die Breite des Fotos scheint mitgerechnet zu werden. Das sieht man, wenn man dem Text-div einen border gibt. Der schließt das Bild mit ein.

Bei austauschbaren Bildern kann ich aber die Gesamtbreite nicht kalkulieren. Wie könnte ich das Problem lösen?

Linuchs

[Matthias Apsel]

Om nah hoo pez nyeetz, Linuchs!

Bei austauschbaren Bildern kann ich aber die Gesamtbreite nicht kalkulieren. Wie könnte ich das Problem lösen?

Was hältst du von einer maximalen prozentualen Breite für das Bild?

Float hat übrigens keinen Einfluss auf die Positionierung des div-Elements sondern auf nachfolgende Inhalte, sodass ich vermuten würde, sowohl div als auch p sind überflüssig. Siehe auch http://wiki.selfhtml.org/wiki/Float

Matthias

[Linuchs]

Hallo Matthias,

Was hältst du von einer maximalen prozentualen Breite für das Bild?

Löst das Problem nicht. Angenommen, das Bild sei max. 50% breit, dann können die restlichen 50% dennoch kleiner sein als ein langes Wort, das nicht in die "Lücke" passt. Und ich möchte das Bild gar nicht zur Briefmarke schrumpfen, es soll auch auf dem Smartphone ordentlich aussehen (mit Text drunter stat daneben).

Bei der Größenänderung des Viewports bleibt die Schriftgröße unverändert.

Float hat übrigens keinen Einfluss auf die Positionierung des div-Elements sondern auf nachfolgende Inhalte, sodass ich vermuten würde, sowohl div als auch p sind überflüssig. Siehe auch http://wiki.selfhtml.org/wiki/Float

Ja, das div war nur für den missglückten Versuch eingefügt. Mehrere p machen aber Sinn, auch neben dem Bild sollen Abstände zwischen den Absätzen sein.

Linuchs

[Quincunx]

Linuchs,

viellecih ein wenig mit flex-flow experimentieren?

gruesse qx

[Linuchs]

Hallo qx,

viellecih ein wenig mit flex-flow experimentieren?

Den Sinn des Beispiels habe ich nicht verstanden.

Wenn ich den Viewport schmäler mache, verschwindet der Text ganz weit nach rechts ins Nirwana und ich muss ihn mit dem x-scrollbar wieder sichtbar machen. (Opera)

Bei Firefox wird der Text schmäler und höher als das Bild, umfließt es aber nicht, sondern bleibt in einer Spalte wie bei einer zweispaltigen Tabelle.

Linuchs

[Quincunx]

Hallo Lichus,

Den Sinn des Beispiels habe ich nicht verstanden.

Da war ich zu schnell.

(Opera)

dafür habe ich nichts optimiert.

Der Weg der mir dazu einfällt ist:

@media only screen and (max-width: 740px) {  
  div {  
    clear: both;  
  }  
}  

wobei 740px nur ein Wert ist, der abhängig von dem breitesten Bild ist.

gruesse qx

[Quincunx]

http://selfhtml.quincunx.eu/examples/clear.html Link vergessen

[ChrisB]

Hi,

Die Breite des Fotos scheint mitgerechnet zu werden. Das sieht man, wenn man dem Text-div einen border gibt. Der schließt das Bild mit ein.

Jein; block-Elemente werden weiterhin über die volle Breite auch „unter“ dem gefloateten Element gelayouted – nur inline-Elemente fliessen um das gefloatete Element herum.

Bei austauschbaren Bildern kann ich aber die Gesamtbreite nicht kalkulieren. Wie könnte ich das Problem lösen?

Ein inline-block Pseudoelement (:before) mit fester (Mindest-)Breite sollte helfen.

MfG ChrisB

[Linuchs]

Hallo ChrisB,

Ein inline-block Pseudoelement (:before) mit fester (Mindest-)Breite sollte helfen.

Ja, habe jetzt erstmal eine Grafik width:12em; height:0 vor den ersten Absatz gesetzt.

Das ist die Lösung, danke.

Linuchs

[Gunnar Bittersmann]

@@Linuchs:

nuqneH

Ein inline-block Pseudoelement (:before) mit fester (Mindest-)Breite sollte helfen.

Ja, habe jetzt erstmal eine Grafik width:12em; height:0 vor den ersten Absatz gesetzt.

Das ist die Lösung, danke.

spacer.gif? 2014? Wirklich?

Nein, das kann nicht die Lösung sein.

Was hast du gegen das von ChrisB vorgeschlagene Pseudoelement?

Qapla'