negative margin

Negative top and left margins move the element up and left while negative right and bottom margins make following siblings move left and up.

The aqua box moves to the left bringing its next siblings with it. Then the yellow box moves farther to the left, bringing the last sibling with it. This last box now moves even farther to the left. Visually, the three boxes appear in reverse order (#pink, #yellow, and #aqua).

IE 6 and 7 do not offset the three boxes to display them next to each other. Instead, these boxes share the same left offset in relation to the parent container as if they were all floats (see next test case).

For these boxes to show in IE 6 and 7, we style them with:

	zoom: 1;
	position: relative;

Try These

Watch This

aqua
yellow
pink

Check This

<div id="aqua">aqua</div> <div id="yellow">yellow</div> <div id="pink">pink</div>

Edit This

Use shift + enter to create new lines (even in Safari and Chrome).