[Edinburgh-pm] [OT] wrapping image captions in HTML sensibly

Nick Woolley nickwoolley at yahoo.co.uk
Tue Jan 30 08:16:13 PST 2007


I don't suppose anyone knows the CSS required to get HTML like this to 
behave? I'm googling without much luck so far.

  <div class="figure">
   <p><img src="blah.jpg" alt="arbitrarily sized image"></p>
   <p>This is a caption which unwrapped is wider than the image and
   we want it to be wrapped to the width of the image without expanding
   the parent div.</p>

So I want it to display (as described within) in a cross platform way, 
i.e. I want figure div elements like this to be able to flush right or 
left and have the text flow around them as normal. I don't know what 
size the images will be in advance, so I can't hard code that.

However, by default the caption text will inflate the div to the width 
of the unwrapped caption, or the max width of the parent block, and that 
just looks really rubbish.

Adding this CSS seems to do the trick in Firefox, but not IE7 (I can't 
currently test IE6).

div.figure {
   display: table; width: 0;

Finally, I don't want to change the HTML if avoidable because it's 
automatically generated by something I don't want to muck with.  This 
also means I don't want to insert javascript.

It sounds like a fairly common problem, so perhaps someone here already 
solved it?



All New Yahoo! Mail – Tired of Vi at gr@! come-ons? Let our SpamGuard protect you. http://uk.docs.yahoo.com/nowyoucan.html

More information about the Edinburgh-pm mailing list