title: How to prevent divs from overlapping?
body: <p>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? </p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/6DtSS/2/" rel="noreferrer">enter link description here</a></p>
  
  <p>Markup</p>
  
  <pre><code>&lt;div id="homecontent-mid" class="row rounded"&gt;
   &lt;div id="homebanner" class="rounded"&gt;
      &lt;div class="sliderdiv"&gt;Slider Content&lt;/div&gt;
      &lt;div class="main-search"&gt;Search Content Here&lt;/div&gt;
   &lt;/div&gt;
   &lt;div id="homemidcontent" class="rounded"&gt;
      &lt;div id="home-mid-mid"&gt;Mid content here&lt;/div&gt;
      &lt;div id="home-mid-right"&gt;Mid Content Right here&lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#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;
  }
  </code></pre>