css - 外側のdivを子divに合わせる方法は?

Question

fiddleには 2 つの円グラフがあります。コンテンツがその中にあるものに適合しないのはなぜですか? チャートがコンテンツからはみ出す理由は何ですか？これらのグラフを黄色のコンテンツ エリアに配置します。CSSの初心者なので、どうすれば修正できるかわかりません。

#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;
}

---

<div id="content"> 
    This is the content area
    <div id="piechart1" style="position:relative;top:20px;float:left;"></div>
    <div id="piechart2" style="position:relative;float:left;"></div>
</div>