smooth div repositioning with CSS transitions

Question

I have 3 divs. The first 2 are on top of the third one.

The divs on top are of different heights and only one is visible at a time: they toggle their visibility. Because they're of different height, when these two divs toggle, they cause a shift in the top position of the third div that's underneath. I was wondering if there's a way to use CSS transition to make the movement of the third div smooth.

This is the HTML:

<div id="Toggle">click here</div>

<div id="InnerDiv1"></div>
<div id="InnerDiv2"></div>

​<div id="BottomDiv"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

This is the CSS:

#InnerDiv1{
    height:30px;
    width:200px;
    background:red;
    margin:10px 10px;   
    clear:both;}

#InnerDiv2{
    height:60px;
    width:200px;
    background:blue;
    margin:10px 10px;
    clear:both;    
    display:none;}

#BottomDiv{
    height:60px;
    width:200px;
    background:yellow;
    margin:10px 10px;
    transition:all 2s ease;}

And some quick jquery for the toggle:

$('#Toggle').click(function() {
    $('#InnerDiv1').toggle();
    $('#InnerDiv2').toggle();
});​

Here is the jsfiddle for clarity.

The goal is to make the yellow div move smoothly. I can do this with jquery but I was wondering if there's a way to make it work just with CSS.

Thanks for your suggestions.

Answer 1

Well, I could give a better example if I knew the purpose of this code. So I will just guess.

http://jsfiddle.net/35USv/1/

this is sort of a poorly set up toggle. There is however good stuff. You can use -webkit-transition or -moz or -o for the animation. you also now only have to think about one element and can just change the content of that div.