title: I want JQuery Animate to push content down when it expands
body: <p>Can anyone see what I've done wrong here? I want the content to expand and push the footer below it down when it reveals the hidden div. Here an example. Don't mind the awful colors:
  <a href="http://www.kerrydean.ca/MATHESON/home5.html" rel="nofollow">http://www.kerrydean.ca/MATHESON/home5.html</a></p>
  
  <p>CSS</p>
  
  <pre><code>.valveMenuWraps {
      background-color: #990;
      margin: 9px;
      float: left;
      height: 40px;
      width: 170px;
      overflow: hidden;
      padding: 5px;
      position: relative;
  }
  #valveMenu {
      background-color: #FFF;
      position: relative;
      height: 75px;
      width: 795px;
      left: 4px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div id="picMenu"&gt;
      &lt;div id="first" class="pics"&gt;&lt;/div&gt;
      &lt;div id="second" class="pics"&gt;&lt;/div&gt;
      &lt;div id="third" class="pics"&gt;&lt;/div&gt;
      &lt;div id="fourth" class="pics" &gt;&lt;/div&gt;
      &lt;/div&gt;&lt;!--end of pic menu--&gt;
      &lt;div id="valveMenu"&gt;
      &lt;div id="controlWrap" class="valveMenuWraps"&gt;
      &lt;div id="control"  style="position:relative"&gt;
      &lt;p&gt;
      vee ball&lt;br /&gt;
      butterfly control&lt;br /&gt;
      rotary eccentric plug&lt;br /&gt;
      globe
      &lt;/p&gt;
      &lt;/div&gt;&lt;/div&gt;
      &lt;div id="safteyWrap" class="valveMenuWraps"&gt;
      &lt;div id="saftey" style="position:relative"&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div id="automatedWrap" class="valveMenuWraps"&gt;
      &lt;div id="automated"&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div id="manualWrap" class="valveMenuWraps"&gt;
      &lt;div id="manual"&gt;
      &lt;p&gt;soft seated ball valves&lt;br /&gt;
          high performance butterfly valves&lt;br /&gt;
          resilinet seated butterfly valves&lt;br /&gt;
          metal seated ball valve&lt;br /&gt;
          triple offset butterfly valves&lt;br /&gt;
          multi-port ball valves&lt;br /&gt;
          gate, globe, check valves&lt;br /&gt;
          specialty check valves&lt;br /&gt;
          knife gate valves&lt;br /&gt;
          diaphram valves&lt;br /&gt;
          pinch valves&lt;/p&gt;
      &lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;!--end of valveMenu--&gt;
      &lt;div id="footer"&gt;&lt;a href="test.html"&gt;HOME&lt;/a&gt; | &lt;a href="test.html"&gt;CONTACT US&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;!--end of content--&gt;
  </code></pre>
  
  <p>and the jQuery</p>
  
  <pre><code>$(document).ready(function(){
  
      //When mouse rolls over
      $("#controlWrap").mouseover(function(){
          $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
      });
  
      //When mouse is removed
      $("#controlWrap").mouseout(function(){
          $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
      });
  
  });
  </code></pre>
  
  <p>thanks! this site is awesome!</p>