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

[ArturoGallegos]

Haber amigo vamos viendo...
1ra. en #footer no cierras

2da. la medida del div contenedor no coincide con los divs internos

div contenedor 960px
divs internos >> 84+800+84 =968 ?¿ no salimos verdad?

3ra. usas float para los laterales pero el header, container y footer no

4ta. no veo tu finalidad de hacer crecer los divs con un padding-bottom

5ta y ultima. Utiliza un código mas como este>>>

Código CSS:

html, body{height:100%; margin:0; padding:0;}
#Cont, .LeftPane,  .RightPane, .ContPane{height:100%;}
#Cont{width:960px; margin:auto;}
.LeftPane,  .RightPane{width:80px; float:left; background:#FF9966;}
.ContPane{width:800px; float:left;}
.HeaderPane{background:#FFFF99;}
.ContainerPane{background:#FFCCFF;}
.FooterPane{background:#CCFF99;}
 

Código HTML:

<div id="Cont">
    <div class="LeftPane">LeftPane</div>
    <div class="ContPane">
        <div class="HeaderPane">HeaderPane</div>
        <div class="ContainerPane">ContainerPane</div>
        <div class="FooterPane">FooterPane</div>
    </div>
    <div class="RightPane">RightPane</div>  
</div>
 

edito: 6ta. y ahora si ultima......el footer no te respeta el ancho simplemente porque no le indicaste un ancho

[pitonblanco]

Iniciado por Ag666

Haber amigo vamos viendo...
1ra. en #footer no cierras

2da. la medida del div contenedor no coincide con los divs internos

div contenedor 960px
divs internos >> 84+800+84 =968 ?¿ no salimos verdad?

3ra. usas float para los laterales pero el header, container y footer no

4ta. no veo tu finalidad de hacer crecer los divs con un padding-bottom

5ta y ultima. Utiliza un código mas como este>>>

muchas gracias por la ayuda, me has visto ver mis errores, supongo que mi problema es que sigo pensando en tablas, pero ya lo empezare a dejar atras, estoy construyendo toda mi web con puro css y quitando todo lo que estaba hecho en tablas

algun tutorial que me recomiendes donde pueda aprender mejor como posicionar los div? gracias!

[hades87]

Te recomiendo las guías que hico Mikmoro, que son esta y esta y yo te recomiendo con la que aprendí de verdad a dejar las tablas, que es esta

[pitonblanco]

ahora que examino tu ejemplo con mas detalle tengo algunas dudas, espero no sea mucha molestian:

he notado que solo el contenedor principal es # id, y los demas con class, a que se debe esto?
que tal si quisiera que los contenedores laterales, rightpane y leftpane terminaran just donde temina el footer? para que sin importar el largo del texto, los paneles laterales se extiendan hasta el footer

gracias por tus respuestas :)

[ArturoGallegos]

ok en mi ejemplo solo el contenedor principal es un ID por uso y costumbre, no es por ninguna razón especifica... tal vez pudiera decir la razón es que los ID solo se pueden usar una sola vez en el sitio y los CLASS los podemos aplicar cuantas veces necesitemos.

siempre que construyo un sitio los estilos del contenedor principal los aplico una sola ves y no los repito en ninguna otra área.... si supiera los volveré a aplicar el contenedor principal seria también un CLASS

en cuanto a que el RightPane y LeftPane crezcan no te tengo una respuesta, ya que siempre dejo crezcan de acuerdo a su contendió pero como ya dijo nuestro compañero Hades87 has una visita a las guías de Mikmoro

ahorita ando algo atareado y no e tenido tiempo de revisar a fondo quizás el fin si no lo as resuelto eche una mirada mas por lo pronto checa este ejemplo quizás te ayude http://www.araudi.net/ejemplos/conjunta.html

[pitonblanco]

muchas gracias hades87 y Ag666!

voy a revisar toda esta documentacion a ver que encuentro de util, gracias por todo y suerte con sus proyectos! :)