title: Absolute div does not scroll with page
body: <p>From the fiddle below, I am trying to make the 'inner-navigation' div absolutely positioned so it stays fixed within the 'compare-display' box. The problem I am having is that when you scroll, the 'inner-navigation' div does not stay fixed. How can I remedy this problem?</p>
  
  <p>Here is my fiddle:</p>
  
  <p><a href="http://jsfiddle.net/Cd9eZ/">http://jsfiddle.net/Cd9eZ/</a></p>
  
  <p>HTML Code</p>
  
  <pre><code>&lt;div class="compare-display"&gt;
      &lt;div class="table"&gt;
          &lt;div class="source-compare col-50"&gt;
              &lt;div class="page"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="navigation-compare"&gt;
              &lt;div class="inner-navigation"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="target-compare col-50"&gt;
              &lt;div class="page"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS Code</p>
  
  <pre><code>.table {
      display: table;
      height: 100%;
      width: 100%;
  }
  .table &gt; div {
      display: table-cell;
      vertical-align: top;
  }
  .table &gt; .col-50 {
      width: 50%;
      background: green;
  }
  .compare-display {
      position: relative;
      overflow: auto;
      height: 200px;
  }
  .compare-display .navigation-compare {
      min-width: 50px;
      background: blue;
  
  }
  .compare-display .page {
      margin: 20px;
      height: 500px;
      background: orange;
  }
  .compare-display .inner-navigation {
      position: absolute;
      width: 50px;
      top: 0;
      bottom: 0;
      background: red;
  }
  </code></pre>