title: Expanding height of parent div based on children's height
body: <p>I know there are several similar questions answered here, but I can not seem to get this working.</p>
  
  <p>I have two parent <code>div</code>s - one is like a frame with a border and padding, the second is a solid black background, and the third is where a transparent image will actually be placed. I need the two parent <code>div</code>s to expand their height based on the image's height.</p>
  
  <p>I have this working for the <code>div</code> with the black background, but I can't get the parent <code>div</code> with the border to expand it's size:</p>
  
  <p>Here is the fiddle: <a href="http://jsfiddle.net/vpdj4kst/" rel="nofollow">http://jsfiddle.net/vpdj4kst/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#builder_container {
    width: 100%;
    /*overflow: auto;*/
    position: relative;
    padding: 8px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
    display: inline-block;
    clear: both;
  }
  #builder_contents {
    background: #000;
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
  }
  .builder_img {
    width: 100%;
    height: auto;
    position: absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="builder_container"&gt;
    &lt;div id="builder_contents"&gt;
      &lt;img class="builder_img" src="image.png" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>