второй div внутри другой не появляется?

Question

У меня есть страница настроить так:

HTML:

<div id="wrapper"> 
    <div id="right"> 
    ... 
    </div> 

    <div id="left"> 
    <div id="top">...</div> 
    <div id="bottom">...</div> 
    </div> 
</div> 

CSS:

#wrapper { 
    margin: 0 auto; 
    width: 400px; 
} 

#wrapper #right { 
    position: relative; 
    float: left; 
    width: 400px; 
    border: 1px solid black; 
} 

#wrapper #left { 
    position: fixed; 
    float: left; 
    width: 200px 
    top: 150px; 
    margin-left: -230px; 
    border: 1px solid black; 
} 

#wrapper #left #top { 
    float: left; 
    border: 1px solid black; 
    margin-bottom: 20px; 
} 

#wrapper #left #bottom { 
    float: left; 
    border: 1px solid black; 
} 

По какой-то причине дно DIV внутри левой DIV не отображается. Любое объяснение, почему оно не появляется? И есть ли решение? Заранее спасибо!

Answer 1

При использовании float:left;, то <div> не будет занимать пространство, так что нижняя <div> позади верхних дел. Чтобы устранить эту проблему, получите float:left; сверху <div>.

Answer 2

Показаны. Проверить http://codepen.io/anon/pen/pzqoi

#wrapper {background:#f4f4f4; height:960px;} 
#right{background:#f4f4f4; border:1px solid #ccc; float:right;} 

#left {background:#f4f4f4; border:1px solid #ccc; float:left; padding:10px;} 
#top {background:#f4f4f4; border:1px solid #ccc;margin-bottom:5px;} 
#bottom {background:#f4f4f4; border:1px solid #ccc; clear:both;}