title: jQuery slideDown + CSS Floats
body: <p>I'm using a HTML Table with several rows. Every second row - containing details about the preceding row - is hidden using CSS.</p>
  
  <p>When clicking the first row, the second row gets showed using jQuery <code>show()</code>. This is quite nice, but I would prefer the slideDown-Effect.</p>
  
  <p>The problem is, inside the details row, there are two floating DIVs, one floating on the left, and one on the right. Now if i slideDown the previously hidden row, the contained DIVs behave strange and "jump around". See this animated gif to understand what I mean: <a href="http://ich-wars-nicht.ch/tmp/lunapic_127365879362365_.gif" rel="nofollow noreferrer">http://ich-wars-nicht.ch/tmp/lunapic_127365879362365_.gif</a></p>
  
  <p>The markup:</p>
  
  <pre><code>&lt;tr class="row-vm"&gt;
      &lt;td&gt;...&lt;/td&gt;
      ...
  &lt;/tr&gt;
  &lt;tr class="row-details"&gt;
      &lt;td colspan="8"&gt;
          &lt;div class="vmdetail-left"&gt;
          ...
          &lt;/div&gt;
          &lt;div class="vmdetail-right"&gt;
          ...
          &lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>.table-vmlist tr.row-details { display: none; }
  div.vmdetail-left { float: left; width: 50%; }
  div.vmdetail-right { float: right; width: 50%; }
  </code></pre>
  
  <p>And the jQuery code:</p>
  
  <pre><code>if ($(this).next().css('display') == 'none')
  {
      // Show details
      //$(this).next().show();
      $(this).next().slideDown();
  }
  else
  {
      // Hide details
      //$(this).next().hide();
      $(this).next().slideUp();
  }
  </code></pre>
  
  <p>Is there a way to fix this behavior, and to implement a nice slideDown-effect?</p>