Putting two divs on the same row via relative positioning

Putting two divs on the same row via relative positioning

I'm trying to create an animation on my site where when a user clicks a
link, the site shifts the main content div off the page to the left, and
the new content (which corresponds to the clicked link) flies into that
open spot from the right. The original content block gets deleted after
the animation completes.
I nearly have it down, and what I've done thus far is to use relative
positioning and jquery to animate the movement of the divs.
Specifically, if block A is the original div, and block B is the
replacement div, I
create B and position it off the right side of the screen by setting
left:100%
Use jquery to animate right:100% on A to send A off the left side of the
screen
Use jquery to fly in B from the right by animating left:0%
The problem is that after these new styles are set, there is still an
empty area where A originally was, and B is now below that empty space.
How would I push B up into that space?