title: My divs cover each other against my will
body: <p>My divs cover each other which is not intended.  I have run it through a debugger and nothing came up...
  I'm trying to build a pop-up menu.</p>
  
  <p>This is my html:</p>
  
  <pre><code>   &lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="noteBack.css"&gt;    
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;header&gt;&lt;span&gt;Note&lt;/span&gt;&lt;/header&gt;
          &lt;div class="sub-header"&gt;&lt;span&gt;friday 25.7.13 &lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>this is my css:</p>
  
  <pre><code>.container{
      position:relative;
      width:382px;
      border:1px solid black;
  }
  header{
      position:absolute;
      width:100%;
      height:41px;
      color:white;
      background-color:#de4b4b;   
      font-weight: bold;
      font-size:14px;
      margin:auto;
  }
  header span{
      display:inline-block;
      padding-left:172px;
      padding-top:14px;
      padding-bottom:14px;    
  }
  .sub-header{
      position:absolute;
      width:100%;
      height:37px;
      background-color:white;
      font-size:10px;
      margin:auto; 
  }
  .sub-header span{
      display:inline-block;
      padding:bottom:14px;
  }
  </code></pre>
  
  <p>any help would be appreciated.</p>
  
  <p><a href="http://jsfiddle.net/4bdrw3s8/" rel="nofollow">JsFiddle</a></p>