title: How to make body tag to adjust for scroll bar?
body: <p>In my website, some pages are having contents that exactly fit in the screen and some pages having scrolling content. All the pages are having, same html structure.</p>
  
  <pre><code>&lt;body&gt;
     &lt;div id="header"&gt;&lt;/div&gt;
     &lt;div id="contentArea"&gt;&lt;/div&gt;
     &lt;div id="footer"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  #header {
  background: none repeat scroll 0 0 #FFFFFF;
  border-bottom: 1px solid #EDEDED;
  height: 172px;
  margin: 0 auto;
  overflow: hidden;
  padding-top: 2px;
  width: 900px;
  }
  
  #contentArea {
  background: none repeat scroll 0 0 #FFFFFF;
  margin: 0 auto;
  padding: 0 0 25px;
  text-align: left;
  width: 900px;
  }
  
  #footer {
  border-top: 1px dashed #CCCCCC;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  width: 900px;
  }
  </code></pre>
  
  <p>When i move to different pages, in some pages the scroll bar appears due to the content, at that time it looks like the whole webpage moved towards left side for some 20px.</p>
  
  <p>How to make the <code>&lt;body&gt;</code> to adjust itself when the scroll bar appears?</p>
  
  <p>Thanks!</p>