Wie verhindert man das Überlappen von Divs?

Question

Ich habe mehrere divs, die nach der Geige zu überlappen scheinen, aber wollen das homemidcontent div unter dem homebanner div sein? Bitte helfen Sie. Wie komme ich zu diesem Problem?

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

Bitte überprüfen Sie die Geige http://jsfiddle.net/6DtSS/5/ ich clear:both-#homemidcontent hinzugefügt haben Nachdem Sie die Elemente schweben, Sie löschen sollten es für das nächste Element, wenn es will setz dich direkt unter.

Answer 2

Halten Sie die Position, die Sie die Blöcke in Ihrem jsfiddle setzen, können Sie das tun, mit:

z-index: 1; 

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

Die Wahl der z-Index manuell können Sie Ordnung wieder, die man oben ist.

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 
}