Der Martin: <div> in Fließtext

Beitrag lesen

Moin Willi,

<div>
  <img>
  <p>Unterschrift</p>
</div>
<p>
  text1
  text2
  text3
  text4
</p>
[...]
Der Text fließt um den <div> Container mit dem Bild im Blocksatz, ...

Dann zeig uns bitte auch das für die Darstellung entscheidende CSS. Denn ohne besondere Formatierungen (z.B. float) würde in deinem Beispiel das div-Element die ganze Breite einnehmen (als Blockelement ist das sein übliches Verhalten), und der Textabsatz steht darunter.

<p>
  text1
  text2
  <div>
    <img>
    <p>Unterschrift</p>
  </div>
  text3
  text4
</p>

Das ist kein valides HTML. Ein Absatz (p-Element) darf keine Blockelemente enthalten. Bei diesem Beispiel würde ein validierender Parser das p-Element vor dem <div> wieder schließen, weil's die Syntax zwingend verlangt.
Was dabei rauskommt, wenn man CSS auf fehlerhaftes Markup anwendet, ist fraglich. Vielleicht zeigt's der eine oder andere Browser wirklich so an, wie du es dir vorstellst, aber das wäre Glückssache.

funktioniert das auch gut, allerdings sind dann text3 und text4 ebenfalls zentriert, wie die Unterschrift auch.

Das könnte eine Konsequenz davon sein, dass der Browser hier krampfhaft versucht, etwas Sinnvolles daraus zu machen.

Wie bekomme ich das hin, dass die Formatierung im <div> Container tatsächlich auch nur im Container gültig ist?

Die beiden Elemente (Fließtextabsatz und div) auf keinen Fall verschachteln. Notiere zuerst das div mit dem Bild und der Bildunterschrift, dann den Fließtext-Absatz. Nimm dann das div mit float aus dem Fluss. Das dürfte deinem ursprünglichen Ansatz entsprechen. Was gefällt dir daran nicht?

So long,
 Martin

--
F: Was ist eigentlich aus deinem schlimmen Durchfall geworden?
A: Mein Arzt hat mir Valium verschrieben.
F: Und das hilft?
A: Naja, ich mach mir immer noch in die Hose. Aber inzwischen ist es mir egal.