Jak zapobiec nakładaniu się elementów div?

Question

Mam kilka elementów div, które wydają się być na okrążeniu, jak na skrzypce, ale chcesz, aby div homemidcontent był poniżej div homebanner? Proszę pomóż. Jak mogę rozwiązać ten 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

Proszę sprawdzić skrzypce http://jsfiddle.net/6DtSS/5/ Dodałem clear:both do #homemidcontent Po unosić elementy należy usunąć to dla następnego elementu, jeśli chce usiądź tuż poniżej.

Answer 2

Utrzymanie pozycji umieścić bloki w jsfiddle można zrobić z:

z-index: 1; 

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

Wybór z-index ręcznie można ponownie zamówienie których jeden jest na górze.

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 
}