title: Div has no height even if it has content
body: <p>I have a <code>&lt;div&gt;</code> which has some <code>&lt;img&gt;</code> in it. Every <code>&lt;img&gt;</code> is inside it's own <code>&lt;div&gt;</code>. The problem is that the outer div is not automatically taking the height of the content even though I set it's height to auto. Also to display the inner divs inline I set them to <code>float: left</code>. But if i remove the float the outer div behaves normally and takes the height of the content. But I need the imgs to be inline. Can anyone help me?</p>
  
  <p><a href="http://jsfiddle.net/gEyEr/1/"><strong>JSFiddle</strong></a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="gallery"&gt;
      &lt;div class="gal-foto"&gt;
          &lt;img src="http://farm3.staticflickr.com/2819/10183644713_c1f49eb81f_b.jpg" class="gal-img"&gt;
      &lt;/div&gt;
      &lt;div class="gal-foto"&gt;
          &lt;img src="http://farm4.staticflickr.com/3694/10183642403_0c26d59769_b.jpg" class="gal-img"&gt;
      &lt;/div&gt;
      &lt;div class="gal-foto"&gt;
          &lt;img src="http://farm4.staticflickr.com/3764/10183532675_0ce4a0e877_b.jpg" class="gal-img"&gt;
      &lt;/div&gt;
      &lt;div class="gal-foto"&gt;
          &lt;img src="http://farm6.staticflickr.com/5331/10183598286_9ab37e273c_b.jpg" class="gal-img"&gt;
      &lt;/div&gt;
      &lt;div class="gal-foto"&gt;
          &lt;img src="http://farm6.staticflickr.com/5334/10183535585_04b18fa7da_b.jpg" class="gal-img"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#gallery {
      border: 1px solid;
      border-radius: 10px 10px 10px 10px;
      box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
      height: auto;
      margin-top: 20px;
      padding: 15px;
  }
  .gal-foto {
      float: left;
      margin: 3px;
      position: relative;
  }
  .gal-img {
      display: block;
      max-height: 150px;
      max-width: 150px;
  }
  </code></pre>