HTML / CSS what is optimal to get following layout construction - html

Question

I am trying to achieve the following layout through HTML and css:
In this layout you have a red upper div, which is 100% the window width and has the height of it's containing elements
Beneath that you have a green div, containing menu items next to each other, which is 100% the window width as well and has a height that makes it fill the rest of the window.
Next to the green div there is a yellow div which momentarily has a width of 0%.
When clicking an item in the green div makes the green div shift right with the width being the width of the widest menu item and the height that makes it fill the rest of the window.
The yellow div then opens next to the green div and it's width covers the rest of the window. Same for the height, this should make it fill the rest of the window. It contains an iframe that displays the clicked menu item and should cover the yellow div entirely.
I have no problem getting the first layout, however when switching to the 2nd I can't seem to get the green and yellow divs' height right.
Here's what I've got:
<div id="Dashboard_CAClientDIV">
Red div
</div>
<div id="Dashboard_MenuDIV">
Green div
<div class="Dashboard_Tile">
Item 1
</div>
<div class="Dashboard_Tile">
Item 2
</div>
<div class="Dashboard_Tile">
Item 3
</div>
<div class="Dashboard_Tile">
Item 4
</div>
<div class="Dashboard_Tile">
Item 5
</div>
</div>
<div id="Dashboard_FrameDIV">
<iframe id="Yellow Div" src="" width="100%" height="100%">
</div>
Going to the 2nd layout adds "_Exp" to Dashboard_MenuDIV and Dashboard_FrameDIV, here's the css I've got:
html, body, #frmDashboard {
/* any div up to fullscreen-cont must have this
in this case html and body */
height:100%;
min-height:100%;
max-height: 100%;
}
body, div {
/*overflow: hidden;*/
margin: 0px;
}
.Dashboard_Tile {
display:inline-block;
}
#Dashboard_MenuDIV_Exp, #Dashboard_FrameDIV_Exp {
min-height: 100%;
height: 100%;
max-height: 100%;
display: inline-block;
}
#Dashboard_MenuDIV_Exp .Dashboard_Tile {
min-width: 100%;
width: 100%;
max-width: 100%;
margin-top: 1px;
}
#Dashboard_CAClientDIV {
min-width:100%;
width:100%;
max-width:100%;
}
#Dashboard_MenuDIV {
min-width:100%;
width:100%;
max-width:100%;
}
#Dashboard_MenuDIV_Exp {
min-width:20%;
width:20%;
max-width:20%;
float: left;
}
#Dashboard_FrameDIV {
min-width:0%;
width:0%;
max-width:0%;
}
#Dashboard_FrameDIV_Exp {
min-width:75%;
width:75%;
max-width:75%;
float: left;
}
Thanks in advance

Answer 1

Use the new CSS3 flex layout: http://css-tricks.com/snippets/css/a-guide-to-flexbox/:
Working fiddle: http://jsfiddle.net/5UXR9/2/
HTML:
<div id="Dashboard_CAClientDIV">Red div</div>
<div id="Dashboard_Wrapper_MenuDIV_and__FrameDIV">
<div id="Dashboard_MenuDIV">
Green div
<div class="Dashboard_Tile small">Item 1</div>
<div class="Dashboard_Tile small">Item 2</div>
<div class="Dashboard_Tile very-large">Item 3</div>
<div class="Dashboard_Tile small">Item 4</div>
<div class="Dashboard_Tile large">Item 5</div>
</div>
<div id="Dashboard_FrameDIV">
<iframe id="Yellow Div" src="" width="100%" height="100%"></iframe>
</div>
</div>
CSS:
body, html {
height: 100%;
}
#Dashboard_CAClientDIV {
background-color: red;
height: 40px;
width: 100%;
}
#Dashboard_Wrapper_MenuDIV_and__FrameDIV {
width: 100%;
height: 100%;
display: flex;
}
#Dashboard_MenuDIV {
background-color: green
}
#Dashboard_MenuDIV .Dashboard_Tile {
background-color: blue;
height: 50px;
margin-bottom: 5px;
}
#Dashboard_MenuDIV .Dashboard_Tile.small {
width: 100px;
}
#Dashboard_MenuDIV .Dashboard_Tile.large {
width: 200px;
}
#Dashboard_MenuDIV .Dashboard_Tile.very-large {
width: 300px;
}
#Dashboard_FrameDIV {
background-color: yellow;
flex: auto;
}
#Dashboard_FrameDIV iframe {
border: none;
}

Answer 2

Well, a CSS3 solution has already been given, but if you want a more primitive approach (CSS2), you can style your layout with display:table properties. Here's an example similar to your situation:
http://jsfiddle.net/S562t/
HTML:
<div class="stage">
<div class="row-top">
<div class="top">red</div>
</div>
<div class="row-bottom">
<div class="left">
<div class="title">Title 1</div>
<div class="title">Title 2334234234</div>
<div class="title">Title 3</div>
<div class="title">Title 4</div>
</div>
<div class="right">
<iframe src="" frameborder="0"></iframe>
</div>
</div>
</div>
CSS:
.stage
{
overflow: hidden;
display: table;
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
.row-top
{
display: table-row;
position: relative;
height: 30px;
}
.row-bottom
{
display: table-row;
position: relative;
}
.top
{
background-color: red;
display: table-cell;
position: absolute;
width: 100%;
height: 30px;
}
.left
{
background-color: green;
display: table-cell;
}
.right
{
background-color: yellow;
display: table-cell;
}
iframe
{
width: 100%;
height: 100%;
}
http://jsfiddle.net/S562t/