子容器崩溃

我有一个网页，整个页面有一个大容器。在里面<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