title: Use full width excluding overflow scrollbar with "position: absolute"
body: <p>I would like to have a small red div with full width at a fixed top position, inside another div that has <code>overflow: scroll</code>. I hope the jsFiddle makes it clear: <a href="http://jsfiddle.net/mCYLm/2/">http://jsfiddle.net/mCYLm/2/</a>.</p>
  
  <p>The issue is that the red div is overlapping the scrollbar. I guess <code>right: 0</code> means the right hand side of <code>div.wrapper</code>; it does not subtract the scrollbar of <code>div.main</code>. When I move the <code>overflow: scroll</code> into <code>div.wrapper</code>, then the red banner has the right size (<a href="http://jsfiddle.net/mCYLm/3/">fiddle</a>). However, it is not at a fixed position anymore (scrolling down makes the banner scroll up).</p>
  
  <p>How can I achieve the following two things together?</p>
  
  <ul>
  <li>The red banner is at the fixed position like in <a href="http://jsfiddle.net/mCYLm/2/">this fiddle</a>.</li>
  <li>The red banner has full width except the scrollbar like in <a href="http://jsfiddle.net/mCYLm/3/">this fiddle</a>.</li>
  </ul>
  
  <p>I'd like to get this working in Google Chrome.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="red-banner"&gt;&lt;/div&gt;
      &lt;div class="main"&gt;
          &lt;div class="item"&gt;foo&lt;/div&gt;
          &lt;div class="item"&gt;foo&lt;/div&gt;
          &lt;div class="item"&gt;foo&lt;/div&gt;
          &lt;div class="item"&gt;foo&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div.wrapper {
      position: relative;
  }
  
  div.main {
      height: 200px;
      overflow-y: scroll;
  }
  
  div.item {
      border: 1px solid black;
      margin: 20px;
      padding: 20px;
  }
  
  div.red-banner {
      background-color: red;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 20px;
  }
  </code></pre>