How to prevent divs from overlapping?

Tags: html,css

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


<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 id="homemidcontent" class="rounded">
    <div id="home-mid-mid">Mid content here</div>
    <div id="home-mid-right">Mid Content Right here</div>


#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;

Solution :

Please check the fiddle 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.

    CSS Howto..

    How to read CSS specification?

    How to create a vertical linear gradient for a GTK separator

    How to add two class styles to anchor tag

    How to get the profile pic aligned center?

    How can I use :hover with multiple classes

    How to have only a vertical scroll bar on a div

    How to make both text and image change on rollover via CSS?

    How to convert all color code #XXYYZZ to shorter 3 character version #XYZ of whole css file?

    How to resize the width of div left to another which has float:left;?

    How to override cloudmade maps css with your own css? [closed]

    How not differ tableview focused rows from other rows?

    How to insert css code in php?

    How To Fix This “Select” Drop Down Using Css [duplicate]

    How to append bind-attr class to initial one in Ember?

    How do I isolate floated content?

    Mini-map of HTML page sections shown as fixed anchors in viewport

    How to use JavaScript OnResize with delay or less processing intensive

    How to give a property to an element using its title in css [duplicate]

    Css overflow-y: how to show only when needed

    How to position div at the bottom of a page

    How to give a javascript function and css style in struts2 property tag

    How to use vertical align in bootstrap

    How can images be resized using Bootstrap

    how to download google fonts in version bold

    How to Obtain Contents of HTML Element in CSS

    How to open a bootstrap modal when checked a chec-box (when a tick is placed on a check box)

    How to access files from this hierarchy?

    How to force a list to be vertical using html css

    Rails - how to build a grid-like list of product page

    How to use pure CSS to show an animation of one element's background and color property?