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

Answer 1

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.