title: Absolute positioning of elements produces an unwanted horizontal scrollbar on <html>, though no element exceeds the viewport
body: <p>I'm building a web application that occupies all the browser's visible area without scrollbars. The window is divided into panes that will have their own scrollbars when necessary.</p>
  
  <p>I've laid out the elements neatly with absolute positioning. Demo: <a href="http://jsbin.com/adozul/6/edit" rel="nofollow">http://jsbin.com/adozul/6/edit</a></p>
  
  <p>Extract:
  </p>
  
  <pre><code>&lt;body&gt;
      &lt;header id="header"&gt;&lt;/header&gt;
      &lt;div id="main"&gt;
        &lt;section class="pane"&gt;&lt;/section&gt;
        &lt;section class="pane"&gt;&lt;/section&gt;
        &lt;section class="pane"&gt;&lt;/section&gt;
        &lt;section class="pane"&gt;&lt;/section&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>#header, #main, .pane {
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
  }
  #header {
      bottom: none;
      height: 35px;
  }
  #main {
      top: 36px;
  }
  .pane:nth-child(1) {
      left: 0;
      right: 75%;
  }
  .pane:nth-child(2) {
      left: 25%;
      right: 50%;
  }
  .pane:nth-child(3) {
      left: 50%;
      right: 25%;
  }
  .pane:nth-child(4) {
      left: 75%;
      right: 0;
  }
  </code></pre>
  
  <p>Everything looks fine except that a wild horizontal scrollbar appears (both in Firefox and Chrome).</p>
  
  <p>The weird thing is that according to FireBug, the blank space at the right side does not belong to any element on the page, and no element has any margins either.</p>
  
  <p><em><strong>UPD:</strong> as Passerby pointed out, there IS an element that exceeds the width, it's inside the fourth pane, so the solution is pretty obvious.</em></p>
  
  <p>I've tracked the issue down to this rule:
  </p>
  
  <pre><code>.pane:nth-child(4) {
      left: 75%;
  }
  </code></pre>
  
  <p>When i disable this very rule, the horizontal scrollbar disappears. Disabling any other panes' positioning rules doesn't affect the scrollbar.</p>
  
  <p>I can get rid of the scrollbar with <code>html { overflow: hidden; }</code>. <strong>But why does the scrollbar appear in the first place and how do i prevent it from appearing (rather then dealing with it when it's already there) without breaking the four-pane layout?</strong></p>
  
  <p>PS If you feel that the task could be solved in a more elegant way, please don't hesitate to point that out. But please take into consideratoin that i'm going to let the user resize panes with jQuery UI Resizable.</p>