title: How can i position a div always above another div? (not overlaying!)
body: <p>How can i position the <code>div#sky</code> always exact above the <code>div#house</code>, while the <code>img#roof</code> is always on the bottom of <code>div#sky</code>?</p>
  
  <p><code>div#plot</code> must be always on the bottom of the browser as well.</p>
  
  <p>The House should awalys has an aspect ratio of 1:1.09 and positioned at the bottom of the browser.</p>
  
  <p>Above that house, the roof should be placed. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;div id="sky"&gt;
          &lt;img id="roof" src="img/roof.png" alt="roof"&gt;
      &lt;/div&gt;
      &lt;div id="plot"&gt;
          &lt;div id="house"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>div#main {
    border-bottom: 1px solid dimgray;
    height: 90%;
    margin: 5vh auto;
    padding: 0;
    position: fixed;
    width: 100%;
  }
  div#sky {
    background: white;
    height: auto;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    z-index: 1;
  }
  div#plot {
    bottom: 0;
    height: auto;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
  }
  div#house {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-left: 2.4vw solid black;
    border-right: 2.4vw solid black;
    height: 0;
    margin: 0 auto;
    padding-bottom: 25.844%;
    position: relative;
    width: 33.2%;
  }
  img#roof {
    bottom: 0.2vw;
    height: auto;
    left: 30%;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    width: 40%;
  }
  </code></pre>
  
  <p>Example:
  <a href="http://www.kunkel-dienstleistungen.com/dev/" rel="nofollow">http://www.kunkel-dienstleistungen.com/dev/</a></p>