Solange Bildunterschriften nicht breiter als ein Bild sind, fällt diese Problem kaum auf. Doch sollte eine Bildunterschrift länger bzw. breiter als die zugehörige Grafik sein, kann es schnell zur fehlerhaften Darstellung des Layouts kommen.

1
2
3
4

<div class="grafikbox">
  <img src="pfad/zum/bild.jpg" alt="Alt-Text" />
  <p>Bildunterschrift</p>
</div>

Wird jetzt die Bildunterschrift länger, richtet sich die umschließende Div-Box an dem P-Element aus und die Box wird entsprechend breiter. Gewünscht ist allerdings, dass das Div die Grafik umschließt, die Bildunterschrift jedoch umbricht sobald sie breiter als die Grafik wird.
(weiterlesen…)