title: CSS overflow scrollbar is positioned wrong when bottom CSS attribute is set
body: <p>I have a div that has a footer image taking up 26px of space. The CSS is set to display a vertical scrollbar when needed, however I need to make sure the scrollbar doesn't overlap into my footer area, so I use <code>bottom:26px;</code> to bring it up. When that happens though the scrollbar is shifted upwards and I can't see the top of the content or the top arrow of the scrollbar. I am not sure what to change for the css to fix it so the scrollbar is at the very top, and leaves a 26px spacing at the bottom for my image. Any help is appreciated.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="channel-container"&gt;
  &lt;div id="channel"&gt;
  
  &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#channel {
  color: #FFFFFF;
  text-align: left;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  bottom: 26px;
  }
  #channel-container {
  float: right;
  width: 31%;
  height: 100%;
  }
  </code></pre>