title: How to make outer div fit child divs?
body: <p>There is two piecharts in <a href="http://jsfiddle.net/wuKFJ/1" rel="nofollow">fiddle</a>. Why the content isn't fit with things that inside of it? What is the reason of overflowing charts out of the content? I want put these charts in to yellow content area. Being a css newbie i don't know that how i can fix it. </p>
  
  <pre><code>#content {
      width:80%;
      height:auto;
      margin-left:auto;
      margin-right:auto;
      padding: 10px 20px 30px 20px;
      background-color:yellow;
      color: #333333;
      font-family: Helvetica, Arial, sans-serif;
  }
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;div id="content"&gt; 
      This is the content area
      &lt;div id="piechart1" style="position:relative;top:20px;float:left;"&gt;&lt;/div&gt;
      &lt;div id="piechart2" style="position:relative;float:left;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>