Three columns css layout + Togglable one - html

Question

I'm trying to create a 3 columns layout in css with a togglable one. The following scheme should explain it better than words.
I want the 3 columns be full height.
In red: A static width column
In green: A togglable menu
In dark green: The menu after being toggled
In white: The main container which should fill the rest of the page
I've tried to do it with the following code but without success:
<div id="header"></div>
<div id="inline_container">
<div id="left_menu"></div>
<div id="toggle_menu"></div>
<div id="main_container"></div>
</div>
And with this css code:
* {margin: 0; padding: 0;}
.body {height: 100%; width: 100%;}
#header {height: 70px; width: 100%;}
#inline_container {height: 95%; width: 100%;}
#left_menu {height: 100%; width: 80px; display: inline-block; float: left;}
#toggle_menu {height: 100%; width: 150px; display: inline-block; float: left;}
#main_container {height: 100%; width: 100%; display: inline-block; float: left;}

Answer 1

Did you want something like this?
http://jsfiddle.net/Kcfde/
I've added jQuery script to show toggle effect, just click the green div.
Basically, when you set float and width, elements should remain with display: block, as they'll fit in into content.

Answer 2

Working FIDDLE Demo
For creating full height page, you need a wrapper:
<div id="wrapper">
<!-- MARKUP -->
</div>
That will fill the whole page:
#wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Inside our wrapper, we create our wanted elements:
<div id="wrapper">
<div id="red"></div>
<div id="lime">
<div id="green"></div>
<span class="close">[X]</span>
</div>
<div id="white">
TEXT
</div>
</div>
Note that the green element is a child of lime element. If lime get class collapsed, all data
will be hidden and the green one will be display. Here is the CSS:
#wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#red {
float: left;
width: 200px;
height: 100%;
background: red;
}
#green {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 30px;
background: green;
display: none;
cursor: pointer;
}
#lime .close {
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
background: pink;
cursor: pointer;
}
#white {
height: 100%;
background: gray;
}
#lime {
position: relative;
float: left;
width: 200px;
height: 100%;
background: lime;
transition: width 0.5s;
}
#lime.collapsed {
width: 30px;
}
#lime.collapsed * {
display: none;
}
#lime.collapsed #green {
display: block;
}
And for closing and opening the lime element, we need some JS (I used jQuery):
$(function () {
$('#lime .close').on('click', function () {
$('#lime').addClass('collapsed');
});
$('#green').on('click', function () {
$('#lime').removeClass('collapsed');
});
});
You can see the final FIDDLE Demo.