CODEWITHSUNDEEP
htmlcss
user2725936
user2725936

Reputation: 495

How to prevent divs from overlapping?

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

Upvotes: 24

Views: 111512

Answers (4)

AZB
AZB

Reputation: 7

I solved a similar problem where I had a button that I wanted to center, followed by a copyright footer at the bottom of the page.

The original code was:

<div class="home_button">
            <a href="/home/dashboard">Dashboard</a>
            </div>
<div>Copyright...</div>

This pushed my button to the left, and scrunched up the copyright next to it.

I added margins to have the button "take up" the entire width:

<div class="home_button" style="width:50%;margin-left:25%;margin-right:25%;">
            <a href="/home/dashboard">Dashboard</a>
            </div>
<div>Copyright...</div>

It now displays properly.

Upvotes: 0

H.D.
H.D.

Reputation: 4454

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.

Upvotes: 6

Iren Patel
Iren Patel

Reputation: 757

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
}

Upvotes: 1

majorhavoc
majorhavoc

Reputation: 2415

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.

Upvotes: 23

Related Questions