title: Fixed width div breaks layout when scrollbars are visible
body: <p>I'm trying to stack a few divs vertically that have a "red" background which takes 100% of the page. Inside those divs i make 960px centered divs. What happens is very strange: if i resize my window to be less than 960px (for scrollbar to appear) - there is a gap at the right side of each stacked div. You can view live example here: <a href="http://jsfiddle.net/GLE7A/" rel="nofollow">http://jsfiddle.net/GLE7A/</a></p>
  
  <p>Basic code:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      * { padding: 0; margin: 0; border: 0; }
      .wmain { background: red; }
      .w960 { margin: 0 auto; width: 960px; }
  &lt;/style&gt;
  
  &lt;div class="wmain"&gt;
      &lt;div class="w960"&gt;
      test
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="wmain"&gt;
      &lt;div class="w960"&gt;
      test
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Solution is easy: just add min-width:960px; to the .wmain div to fix the problem</strong></p>
  
  <p><strong>QUESTION</strong>: why does this strange behaviour happen in the first place? Does a fixed-width child somehow escapes normal flow like absolutely positioned divs or smth.?</p>
  
  <p>Thanks for your thoughts</p>