Bilder innerhalb eines Textes lockern diesen auf. Wenn der Text die Bilder umließt bilden Bilder und Text eine schöne Einheit. Das funktioniert soweit auch super bis zu dem Zeitpunkt an dem eine Aufzählung

<ul> ... </ul>

im Text vorkommt. Jetzt werden fast alle Browser "kreativ", das UL wird irgendwo am linken Bildrand fixiert, eventuell vergebene Abstände (margin und padding) ignoriert und die Punkte sind je nach Browser unter dem oder oder über dem Bild und somit auf dem Bild, welches umflossen wird. 

Insbesondere bei Content Management Systemen mit dynamisch angepassten Seiten und Inhalten wird eine Lösung benötigt, die möglichst unklompliziert ist. 

Marienkäfer

• Farbe: rot
• Anzahl Punkte: 7
• besondere Fähigkeiten: kann Fliegen

Marienkäfer bringen auch Glück sagt man.

Außerdem gehören Blattläuse auf ihren Speiseplan, was insbesondere Garten- und Balkonkästenbesitzer freut.

Der gesamte Text neben dem "Bug" wird in eine Tabelle mit nur einer Zeile und einer Spalte eingefügt. Bei größeren Bildern für jeden Absatz eine eigene Tabelle verwenden. Somit wird ab dem Absatz, der unterhalb vom Bildende liegt wieder die gesamte Breite verwendet, sofern noch genügend Text vorhanden ist. 

Wichtig ist dabei, dass die Tabelle keine zusätzlichen Abstände verursacht. D.h. im template.css entprechend definieren.