build simple template html - divs - html

Question

I'm new with DIV's and I would like to build a simple template for my website.
I need the header to be fixed and 100%, left panel for menu 200px, right panel for main 100% div and bottom panel.
I need that if the left panel doesn't show that the main will be 100%. now if it show's the "main" div in under the left panel. 10X
<div id="top_menu"></div>
<div id="left_menu"></div>
<div id="main"></div>
<div id="bottom"></div>
#top_menu{
height: 40px;
background-color: #343B43;
width:100%;
position: fixed;
z-index: 20;
}
#left_menu{
margin-top:40px;
float: left;
width: 200px;
background: #F4F4F4;
position: fixed;
z-index: 10;
}
#main{
margin-top:40px;
float: right;
background:red;
padding:30px;
width: 90%;
}
#bottom{
height:30px;
position: fixed;
width:100%;
}

Answer 1

Update your HTML and CSS like below.
HTML
<div id="top_menu"></div>
<div class="distab">
<div id="left_menu"></div>
<div id="main"></div>
</div>
<div id="bottom"></div>
CSS
#top_menu{
height: 40px;
background-color: #343B43;
width:100%;
position: fixed;
z-index: 20;
}
.distab{display:table; table-layout:fixed;}
#left_menu{
margin-top:40px;
width: 200px;
background: #F4F4F4;
z-index: 10;
display:table-cell;
}
#main{
margin-top:40px;
background:red;
padding:30px;
width: 100%;
display:table-cell;
box-sizing:border-box;
}
#bottom{
height:30px;
position: fixed;
width:100%;
}
DEMO

Answer 2

<div id="top_menu"></div>
<div id="content">
<div id="left_menu"></div>
<div id="main"></div>
</div>
<div id="bottom"></div>
#top_menu{
height: 40px;
background-color: #343B43;
width:100%;
position: fixed;
}
#lineContainer{
overflow: hidden; /* clear the float */
}
#left_menu{
margin-top:40px;
float: left;
max-width: 200px;
background: #F4F4F4;
}
#main{
margin-top:40px;
background:red;
padding:30px;
overflow: hidden;
}
#bottom{
height:30px;
width:100%;
}
Demo here:
http://jsfiddle.net/msankhala/Ck7pe/3
http://jsfiddle.net/msankhala/Ck7pe/3/embedded/result/

Answer 3

for this you have to put your left menu and main under one div & put leftMenu to the height of 20% and then you will see that main had automatically taken remaining area of its parent div and when leftMenu get disappeared main will automatically take the full 100% area.
You can use Javascript for disappearing purpose but jquery is best to do this all task.