How to prevent divs from overlapping?

Question

I have several divs that seem to over lap as per the fiddle but want the homemidcontent div to be below the homebanner div? Please help. How do I over come this 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

Please check the fiddle http://jsfiddle.net/6DtSS/5/ I've added clear:both to #homemidcontent After you float the elements,you should clear it for the next element if it wants to sit right below.

Answer 2

Keeping the position you put the blocks in your jsfiddle, you can do that with:

z-index: 1; 

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

Choosing the z-index manually you can re-order which one is on top.