CSSのDivsに問題があります

Question

divの負荷があり、左揃えまたは右揃えになっています。しかし、私はここにいくつかの奇妙な行動を持っている：

http://i54.tinypic.com/2hxm3wk.jpg

基本的には、上半分に、2つのdiv要素は、その上部と下部に会うが、異なる方向を浮かべ、その左上の灰色のボックスにはなることはありませんかのようにです右下の灰色のボックスの上に並んでいます。

同じ状況ですが、下部が反転しています。

助けが必要ですか？

Answer 1

これは、1行に2つのフローティング要素を組み合わせた幅がコンテナの幅よりも大きいことがありますか（幅+余白+マージン+ボーダーを考慮する必要があります。）？

この例では、

#container{ 
    width:400px; 
    border:1px solid red; 
    overflow:auto; 
} 
.left{ 
    float:left; 
} 
.right{ 
    float:right; 
} 
.box{ 
    width:140px; 
    border:1px solid green; 
} 
.clear{ 
    clear:both; 
    margin:30px 0; 
} 
.short{height:30px} 
.long{height:130px;}