Animating one DIV that causes another to move

Question

http://jsfiddle.net/AndyMP/nUhhf/1/

This is a simplified situation where I have a DIV that animates downwards but currently overlaps the footer DIV below. What I want to do is have it push the DIV downwards correspondingly.

This fiddle illustrates the general problem. As it stands, the DIV animates downwards but doesn't move the one below it at all.

How can I get it to push the DIV below. I know I could animate that DIV separately, but I'm sure there must be a better solution.

JQ

$(function() {
    $(".down_link").click(function() {
        $(".block1").stop(true, true).animate({ top: 100 }, 200);
    });

$(".up_link").click(function() {
        $(".block1").stop(true, true).animate({ top: 0 }, 200);
});
});

HTML

<div class="down_link">Down</div>/<div class="up_link">Up</div>

<div class="block1"></div>
<div class="block2"></div>

Answer 1

The second div stays in position because both are styled with position: relative.

If you remove position: relative, you could animate marginTop instead. See if this is what you're looking for.

Answer 2

Animate marginTop instead of top.