Shifted divs still take up original space?

Ok, so on my website, I have nested divs. Using my code, I shift them like so:

    floa开发者_JAVA百科t:left;
    position:relative;
    top: 5em;
    left: -4em;
    margin-left: auto;
    margin-right: auto;

So, when the website loads, everything is in the right place. However, other content is still affected by where the div USED to be. Which, I'll just refer to as a "ghost div"

I'm sure this is a common problem, but I have no idea how to phrase it properly so I have been unable to search for the right issue.

Example:

That's exactly what position: relative; is supposed to do. If you want the element to not participate in layout, use position: absolute; instead. You can make that relative to another element by making one of its parents a positioned element (for instance, by applying position: relative; without any coordinates)

Matti is right.

Also, what you probably want to do is this:

Make the container element's position: relative (but don't put any top/left/right/bottom on that) Make this element you're trying to move: position: absolute;

Then your coordinates of the element get set relative to the container element.

When I say "container" element, I mean whatever element it is that wraps this element you're trying to move.

So if your HTML code is like this:

<div id="header">
    <div id="weird-symbol"><img src="/symbo.gif" /></div>
    .. some other stuff ..
</div>

Then your CSS should be something like:

#header { position: relative; }
#header #weird-symbol { position: absolute; left: -200px; top: 30px; }

or something like that.

Hope it helps