Aligning divs underneath each other - html

Question

I have this html:
<div id="container" class="container">
<div id="menu-top">
<div class="top-menu">
<div class="top-menu-buttons">
<button class="button button-icon ion-minus-circled"></button>
<span>{{amount}}</span>
<button class="button button-icon ion-plus-circled"></button>
</div>
</div>
</div>
<div id="classic" class="classic">
<div id="classic-img" class="classic-img">
<img ng-src="{{image.filtered}}" />
</div>
</div>
<div id="menu-bottom">
<div class="bottom-menu">
<div class="bottom-menu-buttons">
<button class="button button-icon ion-eye"></button>
<button class="button button-icon ion-refresh"></button>
<button class="button button-icon ion-crop"></button>
<button class="button button-icon ion-android-options"></button>
<button class="button button-icon ion-social-tumblr"></button>
</div>
</div>
</div>
</div>
And this css:
.container {
width: 100%;
}
.classic {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
background-position: center center;
background-image: url("../img/frames/postcard_00.png");
background-size: contain;
background-repeat: no-repeat;
}
.classic-img {
display: block;
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
top: 6%;
left: 5%;
}
.classic img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.top-menu {
position: relative;
width: 100%;
height: 50px;
background-color: red;
}
.top-menu-buttons {
position: absolute;
margin-left: auto;
margin-right: auto;
bottom: 0;
left: 0;
right: 0;
width: 50%;
text-align: center;
}
.top-menu-buttons .button {
display: inline-block;
vertical-align: middle;
font-size: 25px;
color: white;
}
.top-menu-buttons span {
display: inline-block;
vertical-align: middle;
font-size: 25px;
color: white;
}
.bottom-menu {
position: relative;
width: 100%;
height: 50px;
background-color: green;
}
.bottom-menu-buttons {
position: absolute;
margin-left: auto;
margin-right: auto;
bottom: 0;
left: 0;
right: 0;
width: 80%;
text-align: center;
}
.bottom-menu-buttons .button {
display: inline-block;
vertical-align: middle;
font-size: 35px;
color: white;
padding-left: 10px;
padding-right: 10px;
}
The result i want to have:
The result i got from above code:
My css is designed so that the blue content is under the red (top menu) and the green (bottom menu) is under the blue content. I cant find the mistake i made.

Answer 1

See this fiddle
position:absolute was the culprit.
You have to remove that from .classic-img and .classic-img img. Also, remove height: 100%; from .classic-img img. So the changed CSS would be as below
.classic-img {
display: block;
/* position: absolute; */
overflow: hidden;
width: 100%;
height: 100%;
top: 6%;
left: 5%;
}
.classic-img img {
/* position: absolute; */
width: 100%;
/* height: 100%; */
top: 0;
left: 0;
}

Answer 2

I'm not sure why you need an absolute position for both the image & the image container, if that is really necessary, you need to give the parent #classic a height.
Or you can remove the absolute positioning for the image & the image container like this
Or if you want the image to be fluid, just set it width to 100% instead of absolute positioning
.classic-img img {
width: 100%;
}

Answer 3

Try to give style rule position:absolute and bottom:0 to the .bottom-menu element. This will bring the .bottom menu at the bottom of page.
This will hopefully work for you.