title: Firefox floated elements require DOM poke
body: <p>I have two elements that are floated left.  One is the first child of the body, and the other is the first child of a container that is the second child of the body.</p>
  
  <pre><code>...
  &lt;body&gt;
      &lt;div class='child'&gt;
      &lt;/div&gt;
      &lt;div class='container'&gt;
          &lt;div class='child'&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  ...
  </code></pre>
  
  <p>The container has a fixed width and is centred using 'margin: 0 auto;'.  The intention was to allow the container child to stay left but accommodate the body child when the window is small.</p>
  
  <p>The fiddle is here:</p>
  
  <p><a href="http://jsfiddle.net/mrSav/7/" rel="nofollow">http://jsfiddle.net/mrSav/7/</a></p>
  
  <p>This solution works fine in Chrome; you'll notice that the container child happily moves over for the body child when you make the window smaller.</p>
  
  <p>However in Firefox when you make the window smaller the container child overlaps the body child.</p>
  
  <p>For both children I added a hover state which effectively 'pokes the DOM' and forces Firefox to re-flow the page.  When you hover the mouse over the children the page corrects itself and the children snap into the 'correct' position.</p>
  
  <p>Is this a bug?  Is there a work-around?</p>