divが重複しないようにするにはどうすればよいですか？

Question

私はいくつかのdivを持っているようですが、冗談を重ねると思われますが、homemidcontent divはhomebanner div以下になるようにしますか？助けてください。この問題はどうやって解決できますか？

フィドル：enter link description here

マークアップ

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

Answer 1

フィドルhttp://jsfiddle.net/6DtSS/5/ を確認してください、私はあなたが要素をフロートした後、あなたはクリアする必要が#homemidcontent にclear:bothを追加しましたそれが望むなら、次の要素のためにすぐ下に座る。

手動Zインデックスを選択する

z-index: 1; 

http://jsfiddle.net/djsbellini/JZAx8/

あなたは1が上に順序を再することができます：あなたはjsfiddleにブロックを置く位置を維持

Answer 2

、あなたがそれを行うことができます。

Answer 3

You use margin in HOMEIDCONTENT CSS class and change your div position. 

homemidcontent {

background: #fff; 
    padding-right: 20px; 
    position: relative; 
    margin-top:70px;//Write this 
}