title: Nesting two divs in a "header" div breaks the design
body: <p>I have a header that should always be displayed on top of the page about 20px from the top.
  Right now it is defined with two divs and working the way it's supposed to.</p>
  
  <p><a href="http://jsfiddle.net/nBgj4/" rel="nofollow">http://jsfiddle.net/nBgj4/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  body {
      height: 100%;
      margin-left: 20px;
      margin-top:0px;
      margin-bottom: 0px;
  
  }
  .subheader-left {
      position: absolute;
      top: 20px;
      font-family: serif;
      font-size: 20px;
      text-align: left;
  }
  .subheader-right{
  position: absolute;
  font-family: sans-serif;
  font-size: 12px;
  top: 20px;
  right: 20px;}
  &lt;/style&gt;
  
  &lt;title&gt;XYZ&lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="subheader-left"&gt;XYZ&lt;br /&gt;&lt;/div&gt;
      &lt;div class="subheader-right"&gt;LOREM&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As soon as I try to encapsulate the two DIV tags with a "header" DIV tag and assign it the elements that both encapsulated divs have in common (top: 20px) it breaks the design.</p>
  
  <p>I always assumed that nested divs inherit from their parent divs and want to understand why this is not working in this case. I assum it is because of the "position: absolute" tag, but "position: relative" breaks the design.</p>
  
  <p>thanks </p>
  
  <p><a href="http://jsbin.com/emulel/1/edit" rel="nofollow">http://jsbin.com/emulel/1/edit</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  body {
      height: 100%;
      margin-left: 20px;
      margin-top:0px;
      margin-bottom: 0px;
  
  }
  .header {top:20px;}
  .subheader-left {
      position: relative;
      font-family: serif;
      font-size: 20px;
      text-align: left;
  }
  .subheader-right{
  position: relative;
  font-family: sans-serif;
  font-size: 12px;
  right: 20px;}
  &lt;/style&gt;
  
  &lt;title&gt;XYZ&lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="header"&gt;
      &lt;div class="subheader-left"&gt;XYZ&lt;br /&gt;&lt;/div&gt;
      &lt;div class="subheader-right"&gt;LOREM&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>