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

_{(ソース: imagesup.net )}

ここに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 の例

最初にサイドバーを右にフロートする必要があります。そうしないと、サイドバーを最後に配置すると、フロートされる前の要素の上にフロートアップできません。

Answer 2

青いdivが緑のdivの横に泡立つようにするコードはありません。

例えば

.content { float: left; }