Question

All I want to do is have a div move down the page to a certain position, now the animation works but it also moves all the other divs down as well, how can I fix this?

The div in html code

   <div id = "Sidepanel" style="background:#98bf21;height:0px;width:150px;top:0px;opacity:0;position:relative;left:5px"></div>

The jQuery used

$("#Sidepanel").animate({height:560,top:1010,opacity:1},"slow");

The div that surrounds all the content on the website

#wrapper {
    padding: 0;
    background: url(images/main-image-bg.jpg) no-repeat center top;}

Answer 1

Give it absolute position to take it out of the document flow, then use top to move it around (or ideally CSS transforms where possible).