title: Prevent a centered layout from shifting its position when scrollbar appears
body: <p>My page layout looks <a href="http://jsfiddle.net/salman/qxywp/show/" rel="noreferrer">something like this</a>:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  #content-wrap
  {
      margin: 0 auto;
      width: 800px;
  }
  &lt;/style&gt;
  
  &lt;div id="content-wrap"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>You'll notice that the content-wrap div shifts its position a tad bit when the vertical scrollbar appears. One scenario is when the browser starts to progressively render the page without displaying the vertical scrollbar, then determines that a scrollbar is needed because the content is taller than the "fold". This shifts the div about 10px towards left.</p>
  
  <p>What is the best way to tackle this problem <strong>without forcing the browser to always display the scrollbar?</strong></p>