title: How to make image caption width to match image width?
body: <p>I'm attempting to style this:</p>
  
  <pre><code>&lt;div class="figure"&gt;
    &lt;img src="/some/image.jpg"&gt;
    &lt;p class="caption"&gt;
      &lt;span class="caption-text"&gt;Some caption of any length&lt;/span&gt;
     &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So that the caption is in a shaded box the same width as the image. Note that <code>.figure</code> can sometimes be inside a <code>&lt;td&gt;</code> in a table, in case that matters. It also shouldn't exceed the width of the parent element (scaling the image down in necessary).</p>
  
  <p>Here's what I have so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.caption-text {
    font-size: 14px;
    font-family: Lato, proxima-nova, 'Helvetica Neue', Arial, sans-serif;
    font-weight: normal;
    line-height: 0px;
  }
  
  .figure {
    max-width: 100%;
    display: inline-block;
    position: relative;
  }
  
  .figure img {
    vertical-align: top;
    margin-bottom: 3px;
  }
  
  .caption {
    display: block;
    width: 100%;
    position: absolute;
    padding: 10px;
    background-color: #e3e3e3;
    box-sizing: border-box;
    margin: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width:500px"&gt;
    &lt;h1&gt;Some Title&lt;/h1&gt;
  
    &lt;!--part I want to style--&gt;
    &lt;div class="figure"&gt;
      &lt;img src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=350%C3%97150&amp;w=350&amp;h=150"&gt;
      &lt;p class="caption"&gt;
        &lt;span class="caption-text"&gt;Some caption of any length. Should wrap and push content down when longer than the image.&lt;/span&gt;
      &lt;/p&gt;
    &lt;/div&gt;
    
    &lt;p&gt;Some text which should always go below the caption. When positioned absolutly the caption overlays this text, instead of pushing it down below.&lt;/p&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that putting the <code>.caption</code> as <code>position:absolute;</code> makes it no longer affect the flow of other elements, so it overlays content underneath it instead of pushing it down.</p>
  
  <p>The html markup is automatically generated and I have no way of editing any of it, so I would like to know if this possible with <strong>pure css</strong>.</p>