title: div starts behind a fixed header, instead of below header and is visible above header as user scrolls
body: <p><a href="http://jsfiddle.net/bobbyrne01/zL7hzwpu/" rel="nofollow noreferrer">http://jsfiddle.net/bobbyrne01/zL7hzwpu/</a></p>
  
  <p><code>html</code> ..</p>
  
  <pre><code>&lt;div id="playerView"&gt;
      &lt;div id="header" class="parentWidth"&gt;
          &lt;table class="childWidth"&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;audio id="player" preload="auto" class="childWidth" controls&gt;&lt;/audio&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;div class="left"&gt;
                          &lt;img id="previousTrack" src="../images/previous-24.png" alt="Previous" /&gt;
                          &lt;img id="stopTrack" src="../images/stop-24.png" alt="Stop" /&gt;
                          &lt;img id="nextTrack" src="../images/next-24.png" alt="Next" /&gt;
                      &lt;/div&gt;
                      &lt;div class="right"&gt;
                          &lt;img id="repeatAll" src="../images/repeatAll-24.png" alt="RepeatAll" /&gt;
                          &lt;img id="random" src="../images/random-24.png" alt="Random" /&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;hr/&gt;
          &lt;table class="parentWidth"&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;input id="search" type="text" class="childWidth" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;div id="content"&gt;Song 1
          &lt;br/&gt;Song 2
          &lt;br/&gt;Song 3
          &lt;br/&gt;Song 4
          &lt;br/&gt;Song 5
          &lt;br/&gt;Song 6
          &lt;br/&gt;Song 7
          &lt;br/&gt;Song 8
          &lt;br/&gt;Song 9
          &lt;br/&gt;Song 10
          &lt;br/&gt;Song 11
          &lt;br/&gt;Song 12
          &lt;br/&gt;Song 13
          &lt;br/&gt;Song 14
          &lt;br/&gt;Song 15
          &lt;br/&gt;Song 16
          &lt;br/&gt;Song 17
          &lt;br/&gt;Song 18
          &lt;br/&gt;Song 19
          &lt;br/&gt;Song 13
          &lt;br/&gt;Song 20
          &lt;br/&gt;Song 21
          &lt;br/&gt;Song 22
          &lt;br/&gt;Song 23
          &lt;br/&gt;Song 24
          &lt;br/&gt;Song 25
          &lt;br/&gt;Song 26
          &lt;br/&gt;Song 27
          &lt;br/&gt;Song 28
          &lt;br/&gt;Song 29
          &lt;br/&gt;Song 30
          &lt;br/&gt;Song 31
          &lt;br/&gt;Song 32
          &lt;br/&gt;Song 33
          &lt;br/&gt;Song 34
          &lt;br/&gt;Song 35
          &lt;br/&gt;Song 36
          &lt;br/&gt;Song 37
          &lt;br/&gt;Song 38
          &lt;br/&gt;Song 39
          &lt;br/&gt;Song 40
          &lt;br/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>css</code> ..</p>
  
  <pre><code>.childWidth {
      width: 100%;
  }
  .parentWidth {
      width: 98%;
  }
  .left {
      float: left;
  }
  .right {
      float: right;
  }
  #header {
      background-color: #ccc;
      position: fixed;
  }
  #content {
      background-color: #aaa;
  }
  </code></pre>
  
  <ul>
  <li>Issue 1. (before scroll) <code>#content</code> doesn't start below <code>#header</code></li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/e3WKm.png" alt="before scroll"></p>
  
  <ul>
  <li>Issue 2. (after scroll) <code>#content</code> is visible above <code>#header</code> as user scrolls down page. Ideally I'd like to still see white-space above <code>#header</code> as the <code>&lt;audio&gt;</code> element's <code>seek</code> duration remains visible.</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/rHA5d.png" alt="after scroll"></p>