[解決済み] divが重ならないようにするには？

質問

私はフィドルに従ってオーバーラップするように見えるいくつかのdivを持っていますが、homemidcontent divはhomebanner divの下にあるようにしたいですか？助けてください。どのように私はこの問題を克服するのですか？

フィドル リンクの説明をここに入力

マークアップ

<div id="homecontent-mid" class="row rounded">
 <div id="homebanner" class="rounded">
    <div class="sliderdiv">Slider Content</div>
    <div class="main-search">Search Content Here</div>
 </div>
 <div id="homemidcontent" class="rounded">
    <div id="home-mid-mid">Mid content here</div>
    <div id="home-mid-right">Mid Content Right here</div>
 </div>
</div>

CSS

#homecontent-mid {
    background: url("images/bg-stage.png") repeat-y scroll right top #FFFFFF;
    border: 1px solid #BDBCBD;
    margin-top: 0;
    min-height: 100%;
    outline: medium none;
    overflow: visible;
    position: relative;
}

#homebanner {
    background: url("images/bg-stage-shade.png") repeat-x scroll 0 0 transparent;
    padding-right: 20px;
    position: relative;
}

.sliderdiv {
    background: white;
    float: right;
}

.main-search {
    background: none repeat scroll 0 0 #FFFFFF;
    border: medium solid #D51386;
    float: left;
    overflow: hidden;
    padding: 20px 10px;
    border-radius: 10px;
}

#homemidcontent {
    background: #fff;
    padding-right: 20px;
    position: relative;
}

#home-mid-mid {
    background: yellow;
}

#home-mid-right {
    background: pink;
}

解決方法は？

フィドルをご覧ください。 http://jsfiddle.net/6DtSS/5/ を追加しました。 clear:both から #homemidcontent 要素をフロートさせた後、次の要素がすぐ下に座りたい場合は、それをクリアする必要があります。