title: Absolutely positioned div on right causing scrollbar when the left doesn't
body: <p>I'm trying to "flank" a centered div with some design elements that are absolutely positioned outside the main div's width. I'm getting a scroll bar due to the element on the right, but not the element on the left (IE6/7/8, Chrome, Firefox). How can I get rid of that horizontal scrollbar?</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
      html, body { 
          height: 100%; 
          width: 100%;
          margin: 0;
      }
  
      body { text-align: center; }
  
      .wrapper {
          margin: 0 auto;
          position: relative;
          width: 960px;
          z-index: 0;
      }
  
      .main {
          background: #900;
          height: 700px;
      }
  
      .right, .left {
          position: absolute;
          height: 100px;
          width: 100px;
      }
  
      .right { 
          background: #090;
          top: 0px;
          left: 960px;
          z-index: 1;
      }
  
      .left {
          background: #009;
          top: 0px;
          left: -100px;
          z-index: 1;
      }           
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="wrapper"&gt;
          &lt;div class="main"&gt;&lt;/div&gt;
          &lt;div class="left"&gt;&lt;/div&gt;
          &lt;div class="right"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>