title: Fit <div> tightly around enclosed image?
body: <p>The situation is I have an img and I want a pop-over caption-box whose width is the width of the img. I can't add the caption as a child of the img, because img tags don't take children. Hence my idea was to have something like this:</p>
  
  <pre><code>&lt;div&gt;
     &lt;img/&gt;
     &lt;div&gt;
        ...caption...
     &lt;div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is the outer divs expand to fill the width of their parent, as block elements do, and hence the caption-div becomes equally wide, and I get something that looks like this:   </p>
  
  <p><img src="https://i.stack.imgur.com/nSSuc.png" alt="enter image description here"></p>
  
  <p>Where the outer div becomes the width of the page, the caption follows the width of the outer div and thus sticks out of the image.</p>
  
  <p>I do not want to manually set the width of the outer div, because I am using this sub-template for images of all shapes and sizes all over the site. Is there anyway to make the outer-div hug the image, rather than fill his parent?</p>