title: CSS - Positioning of element (Absolute header, body, fixed footer)
body: <p>I'm rather new to html and css and I'm currently stuck with two annoying problems.</p>
  
  <ol>
  <li>Unless my header's position is absolute it won't cover a small area above and beneath itself. But when the position is absolute the container beneath it partially goes behind the header.</li>
  </ol>
  
  <p><strong>I want my header to cover the same area as it does when it's position is absolute, but I want the container's position to automatically be right beneath the header.</strong></p>
  
  <ol start="2">
  <li>When I divide the footer in half, for "Start" to be on the left side and "Contact" on the right side, and add the Copyright part as a float:right everything else on the line gets pushed to the side.</li>
  </ol>
  
  <p><strong>I want "Start" and "Contact" to expand from the middle, out to the sides, while the Copyright part is to the far right. Everything on the same line.</strong></p>
  
  <p>The header's opacity is only to show the problem.<br>
  The line in the middle is to make sure the footer's text is in the middle.<br>
  I want to avoid a scroll bar.  </p>
  
  <p><a href="https://jsfiddle.net/swvyrLnf/" rel="nofollow">https://jsfiddle.net/swvyrLnf/</a></p>
  
  <pre><code>header {
      width: 100%;
      opacity: 0.5;
      position: absolute;
      top: 0;
      background-color: black;
      color: white;
      text-align: center;
  }
  </code></pre>