Css Box Layout Main Content At 100%

How would you make the main_content stretch to the header, foo开发者_JAVA百科ter, right and left side bar. Just looking for a 3 column layout with header and footer. I've been searching and haven't found any examples that do this.

<style type="text/css">
#header
{
    height:100px;
    border: 1px solid blue;
}
#left_side_bar
{
    border: 1px solid blue;
    width: 100px;
    float: left;
    height: 300px;
}
#main_content
{
    border: 1px solid green; 
    float: left;
    width: ?;
    height: ?;

}
#right_side_bar
{
    border: 1px solid blue;
    width:100px;
    height: 300px;
    float: right;
}
#footer
{
    border: 1px solid blue; 
    clear:both;
    height: 100px;
}

</style>

<div id="header"></div>
<div id="left_side_bar"></div>
<div id="main_content"></div>
<div id="right_side_bar"></div>
<div id="footer"></div>

---

Well, here is a demo with position:fixed, although there are plenty of sites out there which can generate the mark-up and CSS for you. For example the very nice CSS Layout Generator

---

CSS

#Header {
float: left;
clear: both;
width: 100%;
}

#Left_Side_Bar {
float: left;
width: 10%;
}

#Main_Content {
float: left;
width: 80%;
}

#Right_Side_Bar {
float: left;
width: 10%;
}

#Footer {
float: left;
clear: both;
width: 100%;
}

---

Here you can find example of most of the 3 column layouts (fixed, fluid, mixed...) -> CSS Layouts