子容器崩潰

我有一個網頁，整個頁面有一個大容器。在裏面<div>我有另一<div>與float:left。然後，漂浮在該孩子的右側<div>我有第二個容器，其中將包含其他<div> s。輔助容器正在塌陷。我已經搜索並嘗試了其他解決方案，但他們沒有解決任何問題。順便說一句，這是一個html5頁面<!DOCTYPE html>。有任何想法嗎？ CSS：子容器崩潰

body { 
    border: 0px; 
    padding: 0px; 
    margin: 0px; 
    background: white; 
    overflow: hidden; 
    height: 100%; 
    font-family: Hanuman; 
} 
#container { 
    margin: 0 auto; 
    background: red; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 
#bibletree { 
    padding: 0; 
    margin: 0; 
    height: 100%; 
    width: 15%; 
    float: left; 
    background: blue; 
    overflow: auto; 
    white-space:nowrap; 
} 
#container2 { 
    margin: 0 auto; 
    height: 100%; 
    width: 85%; 
    background: gray; 
    float: right; 
    overflow: auto; 
}

HTML：

<div id="container"> 
    <div id="bibletree"> 
      stuff here 
    </div> 
    <div id="container2"> 
      there will be two other divs here as well. This one is collapsing. 
    </div> 
</div>

來源

2012-08-30 preahkumpii