How can i position a div always above another div? (not overlaying!) - html

Question

How can i position the div#sky always exact above the div#house, while the img#roof is always on the bottom of div#sky?
div#plot must be always on the bottom of the browser as well.
The House should awalys has an aspect ratio of 1:1.09 and positioned at the bottom of the browser.
Above that house, the roof should be placed.
HTML:
<div id="main">
<div id="sky">
<img id="roof" src="img/roof.png" alt="roof">
</div>
<div id="plot">
<div id="house">
</div>
</div>
</div>
CSS:
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%;
}
Example:
http://www.kunkel-dienstleistungen.com/dev/

Answer 1

position the div#sky always exact above the div#house
Natural flow dictates that that is already the case
while the img#roof is always on the bottom of div#sky
Take of bottom: 0.2vw; and replace it with top: 100%;. Then add position:relative; to div#sky. The top value is pretty self explanatory. It will place the top of your #roof element 100% of its offset parent's height from its offset parent's top edge. Adding relative positioning to #sky makes it the offset parent of #roof.
div#plot must be always on the bottom of the browser as well.
You've got that part down (hehe... no pun intended).
The House should awalys has an aspect ratio of 1:1.09 and positioned at the bottom of the browser.
This part may be an issue, but it's too hard to tell with the lack of a solid demo. You have a demo in place, but it has a few issues. It doesn't have anything in the #sky element, so I don't know if the "sky" will be an image element, background image, or simple color.

Answer 2

Possible solution is using flexbox styles to adapt the sky height dynamically. Just nearly like a 'holy grail' layout where the footer gets always pushed to the bottom of the page.
css excerpt (see the jsfiddle for a complete example)
body {
display: flex;
flex-direction: column;
height: 100%
}
#sky {
display: flex;
justify-content: center;
align-items: flex-end;
flex: 1 0 auto;
background-color: #0080ff;
}
#plot {
display: flex;
justify-content: center;
flex: 0 0 auto;
background-color: #808040;
}
In this example the body is the main container and I don't use images for the roof or the house - just css background color and a border triangle. But it demonstrates the concept.