Shifted divs still take up original space?

Question

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

    float: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:

Answer 1

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)