CODEWITHSUNDEEP
css
bwoogie
bwoogie

Reputation: 4427

Positioning with Top: -px

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>

Upvotes: 0

Views: 1536

Answers (1)

sbeliv01
sbeliv01

Reputation: 11810

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/

Upvotes: 2

Related Questions