Come evitare che le div si sovrappongano?

Question

Ho diversi div che sembrano fare il giro come per il violino ma vogliono che il div homemidcontent sia al di sotto del div homebanner? Per favore aiuto. Come faccio a venire questo problema?

Fiddle: enter link description here

Markup

<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

Si prega di verificare il violino http://jsfiddle.net/6DtSS/5/ Ho aggiunto clear:both-#homemidcontent Dopo galleggiare gli elementi, si dovrebbe chiarire per il prossimo elemento, se lo desidera siediti proprio sotto

Answer 2

Mantenere la posizione si mettono i blocchi nel vostro jsfiddle, si può fare con:

z-index: 1; 

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

La scelta del z-index manualmente è possibile ri-ordinare che uno è in cima.

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 
}