title: make div's height expand with its content
body: <p>I have these nested divs and I need the main container to expand (in height) to accommodate the DIVs inside</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;!-- head --&gt;
      ...
      &lt;!-- /head --&gt;
  
      &lt;body class="main"&gt;
        &lt;div id="container"&gt;
          &lt;div id="header"&gt;
            &lt;!--series of divs in here, graphic banner etc. --&gt;
          &lt;/div&gt;
  
      &lt;div id="main_content"&gt; &lt;!-- this DIV _should_ stretch to accommodate inner divs --&gt;
        &lt;div id="items_list" class="items_list ui-sortable"&gt;
          &lt;div id="item_35" class="item_details"&gt;
          &lt;/div&gt;
          &lt;div id="item_36" class="item_details"&gt;
          &lt;/div&gt;        
          &lt;div id="item_37" class="item_details"&gt;
          &lt;/div&gt;
          &lt;!-- this list of DIVs "item_xx" goes on for a while
               each one representing a photo with name, caption etcetc --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;br class="clear"/&gt;
  
      &lt;div id="footer"&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS is this:</p>
  
  <pre class="lang-css prettyprint-override"><code>* {
      padding: 0;
      margin: 0;
  }
  
  .main {
      font: 100% Verdana, Arial, Helvetica, sans-serif;
      background: #4c5462;
      margin: 0; 
      padding: 0;
      text-align: center; 
      color: #000000;
  }
  .main #container {
      height: auto;
      width: 46em;
      background: #4c5462;
      margin: 0 auto; 
      border: 0px solid #000000;
      text-align: left;       
  }
  
  .main #main_content {
      padding: 5px;
      margin: 0px;
  }
  #items_list {
      width: 400px;
      float: left;
  }
  
  .items_list {
      width: 400px;
      float: left;
  }
  .item_details {
      margin-top: 3px;
      margin-bottom: 3px;
      padding: 3px;
      float: left;
      border-bottom: 0.5px solid blue;
  }
  </code></pre>
  
  <p>The problem I have is that <code>#main_content</code> doesn't stretch to accommodate all the inner divs, with the result that they keep going against the background.</p>
  
  <p>How can I solve this problem considering the above scenario?</p>