title: position absolute html and css problems
body: <p>I want to have a menu on a fixed position, even when I scroll, etc.</p>
  
  <p>I used "position: absolute;" (also tried :fixed;). Both had the same error.<br>
  (I had to set up "left/right/top: 0%", because I had a bit of freespace on each side.)</p>
  
  <p>I wanted to continue with the next div, which is outside of #headercontainer, but I got a problem there. The next div doesn't start "under" the menu, but on the same position.<br> 
  In short, <strong>these 2 divs overlap each other</strong>.</p>
  
  <p>I could fix that with margin... but I think I did something wrong! Since the next div part also needed the left/right 0% and also a position alignment or I would have got these free spaces on both sides again.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="headercontainer"&gt;
      &lt;div id="logo"&gt;
        &lt;a href=""&gt;
          &lt;img src="images/logo/logo.png" id="headlogo" /&gt;
        &lt;/a&gt;
        &lt;h1&gt;Robert&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;nav role="navigation" class="navigation"&gt;
        &lt;ul&gt;
          &lt;li&gt; &lt;a href=""&gt; ABOUT ME &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt; &lt;a href=""&gt; SKILLS &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt; &lt;a href=""&gt; WORK &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt; &lt;a href=""&gt; CONTACT &lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#headercontainer{
    position: absolute;
    top: 0%;
    right: 0%;
    left: 0%;
    background: #000;
    opacity: 0.7;
    color: #fff;
    -moz-box-shadow: 2px 2px 15px #000;
    -webkit-box-shadow: 2px 2px 15px #000;
    box-shadow: 2px 2px 15px #000;
  }
  </code></pre>