Animating a DIV automatically

Question

http://jsfiddle.net/AndyMP/fVKDy/

This fiddle illustrates a problem I am trying to solve. The container DIV accommodates two DIVs which are animated across. The second DIV has a smaller height than the first because there is less content. What I am trying to do is get the bottom DIV to slide up automatically according to the height of the content in the second DIV when it is visible. But it slides up and over the second DIV.

Any thoughts on how to solve this?

$(function() {
    $(".left_slide").click(function() {
        $(".block1").stop(true, true).animate({ left: -400 }, 500).hide(1000);
        $(".block2").stop(true, true).animate({ left: 0 }, 500);
    });
});
$(function() {    
    $(".right_slide").click(function() {
        $(".block2").stop(true, true).animate({ left: 400 }, 500);
        $(".block1").stop(true, true).animate({ left: 0 }, 500);
    });
});

CSS

#blog_slide_container {
position: relative;
width: 400px;
z-index: 5;
overflow: hidden;
border: 1px solid #000;
}
.block1 {
position: relative;
top: 0px;
left: 0px;
width: 400px;
z-index: 6;
background-color: #333;
color: #FFF;
}
.block2 {
position: absolute;
top: 0px;
left: 400px;
width: 400px;
z-index: 6;
background-color: #CCC;
color: #FFF;
}
#bottom_container {
position: relative;
float: left;
width: 100%;
height: 280px;
z-index: 3;
background-color: #000;
}

Answer 1

Edit: Check my updated fiddle

Added code to dynamically change the container height.

Check animated version http://jsfiddle.net/skram/fVKDy/17/

Another version.. http://jsfiddle.net/skram/fVKDy/16/ <-- Difference is that the left/right shift happens after the bottom blocks slides up/down.

---

Check the updated fiddle demo.

Two things,

1. Added a fixed height to the #blog_slide_container. When you animate, the position of the animating div becomes absolute and so the container re-sizes itself to 0 height.
2. Added show on block1 when right is clicked.