두 번째 div는 다른 안쪽에 나타나지 않습니까?

Question

나는 다음과 같이 설정 페이지가 있습니다

HTML :

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

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

CSS : 왼쪽 DIV 내부 바닥 사업부가 표시되지 않는 몇 가지 이유를 들어

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

. 왜 나타나지 않는지에 대한 설명이 있습니까? 그리고 해결책이 있습니까? 미리 감사드립니다!

Answer 1

확인의 <div>는 공간을 차지하지 않습니다. 이 문제를 해결하려면 float:left; 상단에서 <div>을 꺼냅니다.

Answer 2

표시 중입니다. 바닥 <div> 상단 사업부 뒤에 있도록 float:left;를 사용하는 경우 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;}