Question

I have a content div, and another div that goes underneath the first. The first div’s content changes dynamically, and its height changes as necessary. Normally, the second div’s position automatically gets bumped up and down as the height of the first div changes. How can I animate the movement of the second div, preferably using just CSS and JS (no jQuery)?

Here’s a visual:

On the left are my two divs, initially. Sometimes, div1 will expand in height to fit its contents, and div2 is pushed down. How can I animate the movement of div2?

Answer 1

• demo: http://jsbin.com/uwoxek

function init() {
    var header = document.getElementById('header');
    var header_height = header.offsetHeight;
    header.style.height = '10px';
    header.style.overflow = 'hidden';
    var i = 0;
    var animation = setInterval(function () {
        if (i <= header_height) {
            header.style.height = (10 + i) + 'px';
        } else {
            clearInterval(animation);
            header.style.overflow = 'block';
        }
        i++;
    }, 10); 
}

ok, maybe some note are required?
what you have to move is not the “second” div, but the “first”, that by moving will automatically push the second at the bottom ( or end of the first ) hope this help