title: How can I make a div *not* expand to fill it's parent?
body: <p>I have a div wrapped around an image, like this:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;div class="containing-div"&gt;
        &lt;div class="image-wrapper"&gt;
             &lt;img src="image.jpg"&gt;
        &lt;/div&gt;
        &lt;div class="unrelated-stuff"&gt;
             Blah blah blah.
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now, I expect <code>image-wrapper</code> to take the size of the image, and no more. But it doesn't; it instead fills to the height of <code>containing-div</code>. (See actual page here: <a href="http://holyworlds.org/new_hw/wallpapers.php" rel="nofollow noreferrer">http://holyworlds.org/new_hw/wallpapers.php</a> )</p>
  
  <p>My CSS is:</p>
  
  <pre class="lang-css prettyprint-override"><code>.image-wrapper{
    float: left;
    box-shadow: inset 0px 4px 10px black;
    background-image: url('image.jpg');
  }
  
  .image-wrapper img{
    visibility: hidden;
  }
  .unrelated-stuff{
    float: left;
  }
  </code></pre>
  
  <p>Now, it works just fine if I don't have a Doctype declared. But everything I've tried fails if I do.</p>
  
  <p>How can I make <code>image-wrapper</code> be the size of the image while still using <code>&lt;!doctype html&gt;</code>?</p>