title: Having divs "float" around
body: <p>Sorry for the vague title, I can't really figure out another way to name it.</p>
  
  <p>If you take a look at <a href="http://chigstuff.com/new/public_html/index.html" rel="nofollow">my page</a>, and click the button that says "hi", it'll make the top box disappear, and the bottom box take its place. Now, when the bottom box moves up top, it does it in an instant. How can I get it so that once the top box disappears, the bottom box "floats" up there, gracefully. Any good way with jQuery that I could accomplish it? </p>
  
  <p>You can see a fiddle here: <a href="http://jsfiddle.net/UBEmx/2/" rel="nofollow">http://jsfiddle.net/UBEmx/2/</a></p>