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 is shifted to the left, but the following floats do not follow that box all the way. Because of how floats work, they first stop at the left edge of the containing block; from there, the negative left margin move them farther to the left. This is why all boxes share the same x coordinate.

Using negative right and bottom margins on a float will not move its sibling past its x/y coordinates.

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

A 3 pixel negative margin is often use on floats to fix the three pixel text-jog bug.

Style the wrapper of these boxes (div.markup) with:

	float: none;

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).