How to prevent divs from overlapping?
css, html
Solution
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.
Problem
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; } ```