DIV's not lining up as intended

Question

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!

The images you've used, are not showing up. I don't know if browsers even display tif files. — kleinfreund, Jun 06 '13 at 19:13
You can position the the red box with `position: relative;` and `top: -20px;` and make it overlap the light green box. — kleinfreund, Jun 06 '13 at 19:26

score 1 · Answer 1 · answered Jun 06 '13 at 19:27

<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/

Telmo Marques · Accepted Answer · 2013-06-06T19:47:52.890

1

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/

edited Jun 06 '13 at 19:47

answered Jun 06 '13 at 19:34

Telmo Marques

5,066
1
24
34

Why on earth would one use the pt unit in this case? Please explain. :x (no offense) – kleinfreund Jun 06 '13 at 19:40
1

A point (pt) is the same size on every screen (1/72 inches). On the other hand, a pixel (px) size varies with screen density. Plase see the following for more details: http://stackoverflow.com/questions/3557260/css-newbie-pt-or-px – Telmo Marques Jun 06 '13 at 19:43

DIV's not lining up as intended

2 Answers2