div 오른쪽 부동 div

Question

파란색 div가 녹색 div에 인접하지 않은 이유는 무엇입니까?

이것은 html입니다. 경계선이있는 컨테이너는 없습니다.

<div id="wrapper960" style="min-height:350px; border:1px red solid"> 
<div class="content-sidebar-l" style="min-height:250px; border:1px yellow solid">&nbsp;</div> 
<div class="content" style="min-height:250px; border:1px green solid"></div> 
<div class="content-sidebar-r"style="min-height:250px; border:1px blue solid"></div> 

</div> 

중간에 가운데에 div가있는 CSS입니다. 여기

#wrapper960 {margin:0 auto; padding:0; width:960px;} 

.content-sidebar-l { 
    float: left; 
    width:170px; 
    margin:0; 
    padding:0;} 
.content { 
    margin:0 auto; 
    padding:1em 0 0 0; 
    width:610px; 
    background-color:#fff;} 
.content-sidebar-r { 
    float: right; 
    width:160px; 
    margin:0; 
    padding:0;} 

blue div floating right issue http://www.imagesup.net/?di=7135585031013

그것이 JSFiddle

Answer 1

다시 위해 당신의 HTML에 :

<div id="wrapper960" style="min-height:350px; border:1px red solid"> 
<div class="content-sidebar-r"style="min-height:250px; border:1px black solid"></div> 
<div class="content-sidebar-l" style="min-height:250px; border:1px yellow solid">&nbsp;</div> 
<div class="content" style="min-height:250px; border:1px green solid"></div> 
</div>​ 

jsFiddle example

당신이 필요 사이드 바를 먼저 오른쪽으로 띄우십시오. 그렇지 않으면 마지막으로 배치하여 사이드 바를 떠 다니기 전에 요소 위로 띄울 수 없습니다.

Answer 2

녹색 div 옆에 파란색 div를 버블시킬 수있는 코드가 없습니다.

.content { float: left; }