CSS positioning: 3 divs on each other - html

Question

This is the situation:
I have a main div with 2 div parts(red and orange), both have width: 100% and height: 90%. (should be responsive!)
Inside the red div there is a nav bar (top-right-pink), and 3 buttons in the middle.
The aqua div has to be above both red and orange divs.
What is the right way to position everything?
using relative on the red and orange divs doesnt work because of the '%' in the heights.
<div class="main">
<div class="thedude"></div>
<div class="first">
<ul>
<li> Clients </li>
<li> About Us </li>
<li> Contact </li>
<li class="hasImage"> <img src="logo.png"> </li>
</ul>
<div class="timages">
<img src="icon1.png">
<img src="icon2.png">
<img src="icon3.png">
</div>
</div>
<div class="second">
</div>
</div>
*{
margin: 0;
padding: 0;
}
body{
font-size: 100%;
font-family: arial;
}
.first{
width: 100%;
height: 90%;
background-color: #2acecd;
}
.thedude{
width: 95em;
height: 100%;
max-width: 100%;
max-height: 100%;
position: absolute;
background-image: url('yellow_creature.png');
background-repeat: no-repeat;
background-size: 100%, 100%;
z-index: 500;
}
.second{
width: 100%;
height: 90%;
background-color: #f49900;
}
.third{
width: 100%;
height: 90%;
background-color: #fbc00a;
}
.timages{
margin:0 auto;
width: 81%;
padding-top: 23%;
text-align: center;
max-width: 62%;
}
.timages img{
text-align: center;
max-width: 100%;
}
ul{
z-index: 540;
position: absolute;
right: 0;
text-transform: uppercase;
}
li{
float: left;
padding: 2em 0.5em;
}
li a{
text-decoration: none;
color: white;
}
li img{
max-width: 10em;
}
.hasImage{
padding: 0.6em 0.5em;
}
http://jsfiddle.net/4z55sjn0/

Answer 1

Your HTML structure is the main problem.
HTML
<div class="main">
<div class="thedude">
<div class="first">
</div>
<div class="second">
<ul>
<li> Clients </li>
<li> About Us </li>
<li> Contact </li>
<li class="hasImage"> <img src="logo.png"/> </li>
</ul>
<div class="timages">
<img src="icon1.png"/>
<img src="icon2.png"/>
<img src="icon3.png"/>
</div>
</div>
<div class="third">
</div>
</div>
</div>
If you want the menu on the orange div you need to move it...inside the orange block!
CSS
.first {
width: 30%;
height: 90%;
background-color: #2acecd;
float:left;
position:absolute;
top:5%;
z-index: 999 !important;
}
.thedude {
width: 95em;
height: 100%;
max-width: 100%;
max-height: 100%;
position: absolute;
background-image: url('yellow_creature.png');
background-repeat: no-repeat;
background-size: 100%, 100%;
z-index: 500;
}
.second {
width: 100%;
height: 90%;
background-color: #f49900;
position:relative;
}
.third {
width: 100%;
height: 90%;
background-color: #fbc00a;
}
.timages {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
}
.timages img {
text-align: center;
max-width: 100%;
}
ul {
z-index: 540;
position: absolute;
right: 0;
text-transform: uppercase;
list-style: none;
}
li {
float: left;
padding: 2em 0.5em;
}
li a {
text-decoration: none;
color: white;
}
li img {
max-width: 10em;
}
.hasImage {
padding: 0.6em 0.5em;
}
Check the updated fiddle. Is that close to what you're after?
UPDATE (following comments to this answer)
I've swapped the styles to overcome the misunderstanding.
Check updated fiddle.
I hope it helps.