CODEWITHSUNDEEP
htmlcss
Milksnake12
Milksnake12

Reputation: 561

DIV's not lining up as intended

I have a total of three divs. Two background divs that sit on top of each other, and one for content which will be located within the lower div. My problem is I'm trying get the one with content to cover both the background divs, so I'm giving it a top margin of -20px. It gives me the correct result in Dreamweaver, but once I open it in Safari, the content div is pulling the lower background div up with it. 

<div style="height:40px; width:500px; margin-left:auto; margin-right:auto; background-  color:#CF3; margin-top:100px;"></div>
<div style="height:100px; width:400px; margin-left:auto; margin-right:auto; background-color: #0FF;">
    <div style="height:80px; width:300px; margin-left:auto; margin-right:auto; background-color: #F00; margin-top:-20px;"></div>
</div>

This is what I was trying for: Pic of what I want http://www.snapfoot.com/audio/good.jpg

What I dont want but am getting. I need the blue one to stay down, not go up with the red. Pic of what I don't want http://www.snapfoot.com/audio/bad.jpg

Where am I going wrong? And thanks for any help!

Upvotes: 2

Views: 102

Answers (2)

Telmo Marques
Telmo Marques

Reputation: 5106

The HTML

<div id="backgroundTop" class="center">
    <div id="content" class="center"></div>
</div>
<div id="backgroundBottom" class="center"></div>

By putting the #content div inside #backgroundTop you will be able to define a top margin for the content relatively to the background div. This is done using CSS (see below).

The CSS

#backgroundTop
{
    height:40px;
    width:500px;
    background-color:#CF3;
}

#backgroundBottom
{
    height:100px;
    width:400px;
    background-color: #0FF;
}

#content
{
    /*Here's the magic*/
    position: relative;
    top: 15pt;
    /******************/
    height:80px;
    width:300px;
    background-color: #F00;
}

.center
{
    margin: 0 auto;
}

And the fiddle: http://jsfiddle.net/yBq2V/1/

Upvotes: 1

user710031
user710031

Reputation: 

<div style="height:40px; width:500px; margin-left:auto; margin-right:auto; background-color:#CF3; margin-top:100px;"></div>
<div style="height:80px; width:300px; margin-left:auto; margin-right:auto; background-color: #F00; margin-top:-20px; position: relative; z-index: 9999;"></div>
<div style="height:100px; width:400px; margin-left:auto; margin-right:auto; background-color: #0FF; margin-top: -60px;">
</div>

Is this what you were looking to do?

Here's a fiddle: http://jsfiddle.net/TzK6a/1/

Upvotes: 1

Related Questions