problema con layout a 3 columnas

[pitonblanco]

buenas!

estoy teniendo un problema con css, estoy migrando del uso de "tablas" al uso de divs asi que soy nuevo en esto de hacer columnas y layouts en css y algunas cosas me fallan

estoy intentando crear un layout que se vea de la siguente manera:



quiero que las comumnas laterales abarquen en su totalidad el ancho de la pagina y que encierren con ellas el header y el footer, y obviamente el contenido

pero me esta quedando de la siguente manera:



en el problema, todo esta bien, la columna derecha se queda en su lugar y el header respeta el espacio de la columna izquierda, pero la columna izquierda comienza a la misma altura que lo hace el footer y el footer no respeta las dimensiones dentro del las columnas laterales

este es mi codigo css:

Código CSS:

#main960container
{
width:960px;
position:relative;
    }
#header {
    background: yellow;
    width:800px;
    }
#l_container
{
    width:80px;
    float:left;
    background-color:#FF0000;
    border:2px solid #454545;
    padding-bottom: 1000px;
}
#r_container
{
    width:80px;
    float:right;
    background-color:#0000FF;
    border:2px solid #454545;
    padding-bottom: 1000px;
}
#container{
width:800px;
}
#footer {
    clear: both;
    background: #A2A2A2;
 

y este es mi codigo html:

Código HTML:

<div id="main960container">
<div id="l_container">lado A</div>
<div id="header">HEADER</div>
<div id="container"> contenido </div>
<div id="footer"> FOOTER </div>
<div id="r_container">lado B</div>
</div>
 

cualquier ayuda se agradece! en especial por que me quiero enseñar a maquetear sin tablas