css - 2つのフロートdivの後ろにdivを配置します

Question

2つのdivがあります。1つはfloat：leftで、もう1つはfloat：rightです。それらは並べて表示されますが、3番目のdivを追加すると、2つのフローティングdivの上に表示され、私がしようとしているように後ろには表示されません。

<div id="left_side"  style="float:left;" ></div>
<div id="right_side" style="float:right;" ></div>
<div id="below_side" ></div>

私がやりたいこと：http：//dl.dropbox.com/u/20836988/intended.png

私が実際に得るもの：http：//dl.dropbox.com/u/20836988/what%20i%20get.png

私はvertical-align：bottomを最後のdivに追加しようとしましたが結果はありません。また、2つのfloat divを含むdivを追加してから、3番目のdivを追加しようとしましたが、常に同じ結果が得られます。非常に基本的な質問だと思いますが、どこにも答えが見つかりません...

Answer 1

below_sideにはfloatとclear：bothが必要です。

現在、左と右はフロートされています-これにより、ドキュメントフローからそれらが削除されます。これは、下側が間違った場所になってしまうことを意味します。

フロートを配置する場合：下側に左に配置すると、ドキュメントフローからも取り出され、（比較的）左右と同じスペースに配置されます。次に、クリアを追加します。両方とも、左下に表示されます。そして右

Answer 2

<div id="left_side"  style="float:left; background-color:#ccc" >gdfgfdg</div>
<div id="right_side" style="float:right;background-color:red" >gfdgfkjkjhkjhkjh</div>
<div id="below_side" style="background-color:#000; z-index:1000; float:left; color:#FFF;" >dsfdfds</div>

Answer 3

divに追加clear: bothします。below_side

このリンクを参照してください。