css - ネストされた div の代わりに親をラップする左フロート

Question

レスポンシブ レイアウトをゼロから構築しようとして、何時間もブートストラップでうまくいかなかったのです。私の目標は、ディスプレイのサイズが変更されたときに固定幅のタイルを互いに折り返すことですが、サイドバーの右側の div に表示するのに十分な幅がある場合は、サイドバーの div の下に折り返さないことです。

次の単純な例では、タイルが相互に折り返され、「フィルターと検索」div の下に表示されることを期待していますが、表示の幅が非常に狭くなるまで、左端の「コンテンツ」div の下には表示されません。幅が減少し始めると、サイドバーの div の右側にあるすべてのものがその下に表示されますが、右側にはスタックを開始するための十分なスペースがあります。助言がありますか？

Here is the code (no stylesheets to show everything here:)

<div style="border:1px solid red;width:200px;float:left;" id="sidebar">
    <div>content1</div>
    <div>content2</div>
    <div>content3</div>
    <div>content4</div>
    <div>content5</div>
    <div>content6</div>
</div>
<div style="border:1px yellow solid;float:left;" id="contentarea">
    <div style="border:1px solid;float:left;">filters and search</div>
          <div style="border:1px solid;clear:left;">
          <div style="border:1px solid blue;float:left;width:200px;margin-right:20px;">tile 1</div>
          <div style="border:1px solid blue;float:left;width:200px;margin-right:20px;">tile 2</div>
          <div style="border:1px solid blue;float:left;width:200px;margin-right:20px;">tile 3</div>

      </div>
</div>