Limit text to the width of sibling image / auto width in CSS

Question

I am essentially trying to create a version of the "figure" element (upcoming in HTML5), whereby I have an image with a short description below it.

However, I want to limit the width of this entire element to that of the image, so the text isn't wider than the image (wrapping to multiple lines if necessary).

Basic HTML:

<div class="figure"> <img src="..." alt="..." width="..." height="..." /><br /> A description for the image </div> 

I'm well-versed with CSS but I can't think of any pure CSS solution, without adding a style="width:100px" to the div to match the image width.

Update: After a bit of searching and thinking, the best method seems to be using an inline width on the div. I will keep the width attribute on the image, in case I wish the div to be a bit wider than the image (for example to accomodate a longer caption).

This approach also means I could have two images side-by-side with a caption below. If I have a set of images the same size, I can of course add an extra style to each div.

Thanks to everyone who answered!

Answer 1

This could also be accomplished using 'display: table-caption' for the caption, as follows:

HTML

<div class="wrapper">   <img src="image.jpg" />   <div class="caption">My caption...</div> </div> 

Stylesheet

.wrapper {   display: table; }  .caption {   display: table-caption;   caption-side: bottom; } 

This block can also be floated left of right of other text. I've tested this in IE8+. Here's a JSBin example: http://jsbin.com/xiyevovelixu/1

Answer 2

For setting the width to match the image automatically you could use

.figure {   display: table;   width: 1px; } 

This makes the div behave like a table (not supported in Internet Explorer). Or you could use a table instead of the div. I don't think there is another way of setting the width automatically.

Edit: The simplest way is to forget about the auto width and set it by hand. If it is really needed you can use JavaScript or a table. In this case the use of a table is not so ugly because you are addressing a limitation of the HTML version. In the case of server-side scripting you could also set the width when generating the page.