title: Limit text to the width of sibling image / auto width in CSS
body: <p>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.</p>
  
  <p>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).</p>
  
  <p>Basic HTML:</p>
  
  <pre><code>&lt;div class="figure"&gt;
  &lt;img src="..." alt="..." width="..." height="..." /&gt;&lt;br /&gt;
  A description for the image
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm well-versed with CSS but I can't think of any pure CSS solution, without adding a <code>style="width:100px"</code> to the <code>div</code> to match the image width.</p>
  
  <p><strong>Update</strong>: 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).</p>
  
  <p>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 <code>div</code>.</p>
  
  <p>Thanks to everyone who answered!</p>