Question

I am trying to position a caption below an image without explicit knowledge of the images’ width. I would like the caption to extend to the full image width, but not to stretch the parent elements’ witdh and wrap the lines instead.

I would like to avoid using javascript (reading and applying widths to elements) or using max-width:123px as the range of possible widths is big.

The code currently looks something like this, but can be changed freely. The image width is unknown, but restricted to a maximum dimension.

<div style="float:right; width:auto;">  
  <img src="http://" \>
  <div style="clear:right; min-width:100px; max-width:200px; word-wrap:break-word;">
    My caption which can be longer then the image above and should wrap, I do not want to use max-width.
  </div>
</div>

Any suggestions welcome.

Answer 1

first, get the styles out of the html; those belong in CSS.

then, I think what you can do is set the div’s position to “relative”, but leave its width to auto and its overflow to “hidden”. The hidden setting should force it to be big enough for all its child elements.

The caption, you then set to position:auto, and bottom:0, left:0, width:100%.

That should accomplish what you’re looking for.