Question

Here’s the markup:

<div>
    <a href="google.com">my link</a>
    <span>Testing content.</span> 
</div>

And the CSS:

div > * {
    float: left;
    margin-top: -50px;
}

div{

    margin-top:200px;
}

Note: The div is here just for demonstrating purposes to bring all the content back down so we can see it.

If I use a positive value for margin-top, say 50px, bot the a and span are pushed down by 50 pixels an don’t overlap each other.

If I use a negative value for margin-top, say -50px, both are pulled up by 50px, but they also overlap each other.

Why does this happen, and how do I prevent it?

Edit, some more info:

• Unfortunately, I cant put the a or span in a wrapper.
• I need to keep the floats as I need to reorganize the flow.
• I need to push the a and span upwards.

And a fiddle: http://jsfiddle.net/xsSVX/

Answer 1

Adding

div > * {
    float: left;
    margin-top: -50px;
    padding-bottom: 40px;
}

Gives the div some extra body..

http://jsfiddle.net/xsSVX/6/