title: CSS and DIV with dynamic height
body: <p>I've got a webpage structure like this one:</p>
  
  <pre><code>&lt;div class="total"&gt;
      &lt;div class="menu"&gt;
      &lt;/div&gt;
      &lt;div class="content"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So the "menu" div contains my left menu, and th "content" div contains some dynamic text. Actually the structure I've made positioned both in the correct way, inside my "total" div. I've actually edited my "total" div on my CSS like this:</p>
  
  <pre><code>.total{
  position:relative;
  top:50px;
  margin: 0 auto;
  background-color:#eeeeee;
  height:auto;
  border:2px solid #000;
  border-color:rgb(82,115,154);
  }
  </code></pre>
  
  <p>The problem is that I can't obtain what I actually want: the border is all on the top (it's like an horizontal row) and my div with a different background color do not appear.</p>
  
  <p>How can I make the "total" div's height dynamic? </p>
  
  <p><strong>EDIT:</strong> Link to <a href="http://jsfiddle.net/CJZCt/2/" rel="nofollow">jsFiddle</a></p>