title: Little CSS problem with Auto height and nested div's
body: <p>So I'm finally learning my way around CSS more and have run into a small problem. I have a container div, with a few divs inside of it, one of them is a bit of text (which can be a random height) and an image that will have a MAX height of 200px.</p>
  
  <p>I am using a dotted/colored background behind them that needs to auto expand to the height of whichever is the tallest, either the text or the image. Right now when I use <code>height:auto</code> on the container div it works perfect for the random height text.</p>
  
  <p>But it's only adjusting according to the text's height; if the image is taller than the text, the image overflows the bottom of the background dotted/colored box.</p>
  
  <p>The CSS I'm using currently is this:</p>
  
  <pre><code>h1 div#like_detailed {
    margin: 0;
    font-size: 1.1em;
    width: 700px;
  }
  
  #details-image img {
    border: none;
    clear: left;
    float: right;
    margin: -45px 0 0 0;
    max-height: 200px;
    padding: 0 7px 0 10px;
  }
  
  #deets-container {
    background-color: #FEF;
    border: #190AE7 1px dotted;
    height: auto;
    margin-top: 0;
    margin-bottom: 30px;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 0;
  }
  </code></pre>
  
  <p>And the HTML for it is this:</p>
  
  <pre><code>&lt;div id="deets-container" class="rounded"&gt;
  &lt;!-- Button --&gt;
  &lt;div class="likebtnframe"&gt;(some code)&lt;/div&gt;
  &lt;!-- Button --&gt;
  &lt;div class="tweetbtnframe"&gt;(some code)&lt;/div&gt;
  &lt;!-- Button --&gt;
  &lt;ul id="share"&gt;
  &lt;li&gt;&lt;a name="share"&gt;(some code)&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;!-- Submitted By --&gt;
  &lt;div class="submitter_detailed"&gt;&lt;span class="submitter-color smalltext"&gt;(some code)&lt;/span&gt; (some code)&lt;/div&gt;
  &lt;!-- Image --&gt;
  &lt;div id="**details-image**"&gt;(some code)&lt;/div&gt;
  &lt;!-- Like / Quote --&gt;
  &lt;h1 id="**like_detailed**"&gt;(some code)&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a feeling this is pretty easy but I'm running out of time to sort it out on my own.</p>
  
  <p>Anyone?</p>