title: Firefox page "moves" when hiding/showing divs
body: <p>We have a web page with this general structure:</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div id="basicSearch"&gt;...&lt;/div&gt;
    &lt;div id="advancedSearch" style="display: none"&gt;...&lt;/div&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>With this CSS:</p>
  
  <pre><code>#container { MARGIN: 0px auto; WIDTH: 970px }
  #basicSearch { width:100% }
  #advancedSearch{ width:100%;}
  </code></pre>
  
  <p>We have a link on the page that lets the user toggle between using the "basic" search and the "advanced" search.  The toggle link calls this Javascript:</p>
  
  <pre><code>var basic = document.getElementById('basicSearch');
  var advanced = document.getElementById('advancedSearch');
  if (showAdvanced) {
      advanced.style.display = '';
      basic.style.display = 'none';
  } else {
      basic.style.display = '';
      advanced.style.display = 'none';
  }
  </code></pre>
  
  <p>This all works great in IE.  </p>
  
  <p>It works in Firefox too - except - when we toggle (ie: show/hide) from one div to the other, the page "moves" in Firefox.  All the text in the "container" moves about 5px to the left/right when you toggle back and forth.  Anyone know why?</p>