Question

How would you make the main_content stretch to the header, footer, 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>

Answer 1

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