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

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.

Answer 2

You could use the display:table solution for all other browsers, and a CSS Behaviour for Internet Explorer.

Answer 3

Stylesheet

div.figure * { width: 100% }
div.figure div { overflow: hidden; white-space: nowrap; }

note: to enable wrapping just remove that last css line

HTML

<div class="figure" style="width:150px;">
    <img src="logo.png" alt="logo" />
    <div>A description for the image</div>
</div>

I've checked it in Chrome, Firefox and IE7 and it looks good in all three. I realise this has the width on the div and not the img, but at least you only need to set the width in one place. Short of using css-expressions (IE only) I can't see a way of setting the outer divs width to the width of the first child element.

Answer 4

I had the same problem and after reading this decided to use an inline-style on the surrounding element. Seems the better solution over using a table to me.

Answer 5

I came up with a working and fairly clean solution.

The solution uses a table (or div with display:table if you prefer) and adds a second column to "push" the first cell into the minimum space it really needs. The table can be set to 1px width to stop it growing across the page. I've put together a demo to show this in action:

http://test.dev.arc.net.au/caption-layout.html

Tested and working in IE8, Firefox and Safari/Win

Answer 6

ok, I am trying the table solution which was working, at least it seemed like it was but now it seems to have broken in chrome. I have narrowed the problem to nested divs within the table - why would these interfere with the table's behaviour? I have an image inside the div which is inside the table and the table isnt stretching to fit anymore - anyone have any ideas why>