title: CSS, position: absolute, scrollbars
body: <p>Say there is a page:</p>
  
  <pre><code>&lt;html&gt;&lt;body&gt;
  &lt;div style="position: relative;"&gt;
    &lt;div style="position: absolute; left: -30px;"&gt;LEFT&lt;/div&gt;
    &lt;div style="position: absolute; right: -30px;"&gt;RIGHT&lt;/div&gt;
  &lt;div&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>Why the horizontal scrollbar only accounts for the RIGHT overflow?</p>
  
  <p>In other words, why LEFT triggers no scrollbar, while RIGHT does?</p>
  
  <p>Is there a way, other than <code>body -&gt; overflow: hidden</code>, for RIGHT not to trigger the scrollbar?</p>
  
  <p><strong>Edit</strong>:</p>
  
  <p>What I try to achieve is a wrapper in the middle of page (like any other "content" pane out there - basically <code>div -&gt; margins: 0 auto;</code>. This should trigger horizontal scrollbar if the screen is too small. Then, and this is the problem, I want another div's to "stick outside" of the wrapper - these should not trigger the scrollbar.</p>
  
  <p><strong>Edit 2</strong>:</p>
  
  <pre><code>&lt;html&gt;&lt;body&gt;
  &lt;div id="wrapper" style="position: relative; margin: auto; 
    width: 400px; height: 200px; background-color: red;"&gt;
    &lt;div style="position: absolute; left: -30px;"&gt;LEFT&lt;/div&gt;
    &lt;div style="position: absolute; right: -30px;"&gt;RIGHT&lt;/div&gt;
  &lt;div&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>When the screen is wide enough, everything's fine. But as I try to shrink the screen, all of sudden a horizontal scrollbar appears. The problem is, it only allows to scroll to see RIGHT, and not LEFT. Is the a way to for the scrollbar not to appear until the wrapper, and only the wrapper, is larger than the screen?</p>