Question

I am trying to animate the width of a div which is wrapped by a parent element that is positioned absolute to it’s own parent. It is probably easier to explain by showing an example of what I mean.

What should happen is that when the red rectangle is clicked the width of the green box is animated to a certain width whilst the red rectangle sits alongside it. This all works nice in IE & Firefox, but when running it in chrome the red rectangle jumps below the green box. So I’m just wondering if I’ve done something stupid or if anyone knows what I might be doing wrong?

Thanks,

Answer 1

Nothing wrong, it’s just that the browser thinks there’s not enough free space for both elements to be displayed next to each other 🙂

#banner-wrapper {
    min-width: 100%;
}

Fiddle link: http://jsfiddle.net/K2UbQ/8/