Question

I’m overlapping a div (div2 over div1) using top: -50px; to push it up. Now this leaves 50px below it before the next div (div3). How can I “clear” that and make the div (div3) fall in exactly below the div (div2) I positioned -50px?

<div id="div1" style="width: 1000px; height: 90px; background: red;"></div>
<div id="div2" style="position: relative; top:-50px; width: 1000px; height: 90px; background: blue;"></div>
<!--50 wasted pixels here-->
<div id="div3" style="width: 1000px; background: green; height:90px;"></div>

Answer 1

Add margin-top: -50px to your #div3:

<div id="div3" style="width: 1000px; background: green; height:90px; margin-top: -50px;"></div>

Fiddle: http://jsfiddle.net/N7z6e/