如何讓外部div適合孩子div？

Question

fiddle有兩個餅圖。爲什麼內容不適合其內部的東西？圖表溢出的原因是什麼？我想將這些圖表放入黃色內容區域。作爲一個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> 

Answer 1

你將不得不清除浮動。我會用<div style="clear:both;"></div> 檢查更新提琴http://jsfiddle.net/wuKFJ/4/

Answer 2

它實際上是一個非常簡單的解決 - 只要讓＃內容股利overflow:auto。默認情況下，它不會擴展到覆蓋子div，因爲它們都是向左浮動的，這實際上會摺疊它們。使父級溢出：自動強制擴展以覆蓋浮動div的寬度和高度。

http://jsfiddle.net/wuKFJ/5/

Answer 3

#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; 
    overflow: auto. 
}