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 yellow box moves up and takes with it the following sibling. This offset can make the parent container collapse (#aqua is being clipped).

In IE6 and 7, the first box (#aqua) is displayed as if its two siblings were removed from the flow.

Style the yellow box with:

	margin-top: -80px;
	margin-bottom: 80px;

Try These

Watch This


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