title: No background for scroll part of page
body: <p>My basic layout for my page is:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="headWrap"&gt;&lt;/div&gt;
  &lt;div id="contentWrap"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>headWrap has all my menu items and search bar.  contentWrap holds the content of each page.  Both have a width of 100%.  headWrap uses a repeating background images contentWrap uses a background image much larger than the screen size.  </p>
  
  <p>Somehow, when the page is rendered, the horizontal scroll bar is visible.  Even though it appears that all content is on the page.  If I scroll to the side, the background image does not continue, and the scrolled part of the screen is white.  If I stretch the window wide enough the background image takes up the entire page.</p>
  
  <p>How can I find out what is causing the horizontal scroll bar, and why does the background show up when I stretch the window, but not when I scroll.  </p>
  
  <pre><code>#headWrap{
      position:relative;
      width:auto; 
      height:100px; 
      margin:0px; 
      padding:0px;
      z-index:500; 
      background:url(images/VenueMenu.jpg) repeat-x;
  }
  #contentWrap{
      position:absolute; 
      top:50px; left:0px;
      text-align:left; 
      z-index:10; 
      width:auto; 
      height:1005; 
      margin:0 0 0 0; 
      padding:0 0 0; 
      float:left; 
      background:url(images/contentBg.jpg) repeat-x;
  }
  </code></pre>