title: Scrollbar shifts content
body: <p><strong>I have:</strong> I have several web pages both with this outline:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="container"&gt;
  CONTENT
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>with the CSS:</p>
  
  <pre><code>body{
  color:#000000;
  background-color:#FFFFFF;
  background-image: url(background.jpg);
  background-repeat: repeat-x;
  font-family: verdana;
  letter-spacing: 1px;
  }
  #container{
  margin-left:auto;
  margin-right:auto;
  margin-top:5px;
  width: 700px;
  }
  </code></pre>
  
  <p><strong>Problem:</strong> All pages are short so that no scroll bar shows up, but one page is longer so a vertical scroll bar on the right shows up. This second page causes the container to be shifted (to the left) just a bit.</p>
  
  <p>From what I understand a common solution is to make the scrollbar show up on all pages, but I really want to avoid that since it is just one page out of many.</p>
  
  <p><strong>Question:</strong> Is there a way to avoid shifting the container while still having it centered <em>without making the scrollbar show up on all pages</em>?</p>