Hoja con una cabecera tras columnas y un pie

falmar · #1 (**permalink**) 20/01/2009, 07:03

Hola,

Tengo un problema con mi web, el problema es que estoy haciendo una web con:

Un header

Luego un cuerpo que dentro tiene tres columnas, todas ellas float left.

Y un footer o pie despues del Cuerpo.

El problemilla lo tengo en el Cuerpo con las tres columnas, quiero que cuando una de las columnas se haga más alta por que tengo un spry o por que se añaden datos de la base de datos , empuje al cuerpo para que se haga más grande y no lo sobrepase por encima.

Muchas Gracias

Un Saludo

emiliodeg · #2 (**permalink**) 20/01/2009, 07:12

al pie ponele clear:both;
con eso se soluciona todo :D

falmar · #3 (**permalink**) 20/01/2009, 15:32

Hola de nuevo,

He podido solucionar lo del footer con tu contestación,gracias

El otro problema que tengo es que la columna vertical izquierda que debería estar dentro del contenedor azul si se hace más grande se sale y sobrepasa al contenedor azul invadiendo el footer gris.

Cómo puedo solucionar esto?

Muchas Gracias

seoista · #4 (**permalink**) 21/01/2009, 01:29

Hola falmar, mira a ver si es esto lo que necesitas.

NOTA: Facilitado por Mikmoro.

Saludos.

Mikmoro · #5 (**permalink**) 21/01/2009, 02:47

La única manera de saber qué produce eso es si muestras tu código.

falmar · #6 (**permalink**) 21/01/2009, 04:12

Gracias por vuestra atención, la verdad es que no ecuentro el problema.

EL CODIGO DE LA HOJA DE ESTILOS ES:

Tengo una contenedor en el que inserto toda la pagina:
Contenedor :
#contenedor {
position:relative;
width:985px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: auto;
background-color: #0C9;
}
Dentro de ese contenedor tengo una Header:
Header:
#header{
width:985px;
height:30px;
background-color:#FFF;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
Debajo del Header he colocado un Container para meter dentro las tres columnas:
Container: #container{
width:auto;
height:1300px;
margin: 0px;
background-color: #3CF;
position: relative;
}
Dentro del Cointainer hay tres columnas, izquierda, centro e izquierda
Izquierda: #izquierda{
width:232px;
height:600px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 8px;
float:left;
background-color: #FA0419;
position: relative;
}
Centro es Igual a la izquierda y derecha es igual a las dos anteriores (lo único que cambia son los anchos)

Y después un footer
Footer: #footer {
width:100%;
height:100px;
float: left;
clear: both;
background-color: #CCC;

}

Y EL CODIGO HTML ES:

<body>
<div id="contenedor">
<div id="header">
</div>
<div id="conteiner">
<div id="izquierda">IZQUIERDA</div>
<div id="centro"> <p>CENTRO</p> </div>
<div id="derecha">DERECHA</div>
</div> // final del conteiner
<div id="footer">FOOTER</div>
</div>// final del contenedor
</body>

Si os quereis hacer una imagen visual las fotos de arriba lo representan

gracias

Mikmoro · #7 (**permalink**) 21/01/2009, 05:04

1.- No veo tu doctype.
2.- Es bastante poco probable que la CSS que muestras genere el gráfico de arriba (faltan cosas)

Si quieres que yo intente ayudarte, pon el HTML y CSS completo que estás usando, que te cuesta mucho menos esfuerzo que lo que has puesto y es más claro de entender.

falmar · #8 (**permalink**) 21/01/2009, 09:25

Pues tienes toda la razón, te pongo el codigo:

CSS:

H1 {
FONT-SIZE: 20px; MARGIN: 0px; COLOR: #fff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-ALIGN: left
}
P {
PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 2px; COLOR: #586885; PADDING-TOP: 5px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
BODY {
LINE-HEIGHT: 12px; BACKGROUND-COLOR: #014075; TEXT-ALIGN: justify
}
#container {
MARGIN: 0px auto; WIDTH: 985px; POSITION: relative; HEIGHT: auto; BACKGROUND-COLOR: #0c9
}
#header {
MARGIN: 0px 0px 10px; WIDTH: 985px; HEIGHT: 30px; BACKGROUND-COLOR: #fff
}
#header-1 {
FLOAT: left; WIDTH: 237px; HEIGHT: 30px
}
#header-2 {
FLOAT: left; WIDTH: 500px; HEIGHT: 30px
}
#header-3 {
FLOAT: left; WIDTH: 247px; HEIGHT: 30px
}
#header2 {
MARGIN: 8px 0px 0px 8px; WIDTH: 970px; HEIGHT: 140px
}
#header3 {
MARGIN: 0px 0px 0px 8px; WIDTH: 970px; HEIGHT: 108px
}
#conttex {
MARGIN: 0px;
WIDTH: auto;
POSITION: relative;
HEIGHT: 1000px;
BACKGROUND-COLOR: #3cf
}
#izquierda {
FLOAT: left; MARGIN: 0px 0px 0px 8px; WIDTH: 232px; POSITION: relative; HEIGHT: 600px; BACKGROUND-COLOR: #fa0419
}
#izquierda1 {
FONT-SIZE: 10px; FLOAT: left; MARGIN: 0px; WIDTH: 232px; POSITION: relative; HEIGHT: auto; BACKGROUND-COLOR: #f4fbfd
}
#izquierda2 {
BACKGROUND-POSITION: 50% top;
Z-INDEX: 1;
FLOAT: left;
MARGIN: 0px;
WIDTH: 232px;
BACKGROUND-REPEAT: no-repeat;
POSITION: relative;
HEIGHT: 1300px;
BACKGROUND-COLOR: #fa0419
}
#centro {
PADDING-RIGHT: 0px; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 535px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: auto; BACKGROUND-COLOR: #f9f
}
#centro1 {
FONT-SIZE: 10px; FLOAT: left; MARGIN: 0px; WIDTH: 100%; HEIGHT: 162px
}
.centro2 {
PADDING-RIGHT: 5px; FONT-SIZE: 10px; FLOAT: left; MARGIN: 8px 0px 0px; WIDTH: 525px; HEIGHT: 35px
}
.centro3 {
PADDING-RIGHT: 5px; FONT-SIZE: 10px; FLOAT: left; WIDTH: 525px; HEIGHT: 100%; BACKGROUND-COLOR: #ffdb9c
}
.centro4 {
PADDING-RIGHT: 5px; FONT-SIZE: 10px; FLOAT: left; MARGIN: 15px 0px 0px; WIDTH: 525px; HEIGHT: 35px; BACKGROUND-COLOR: #099
}
#container #conttex #centro .centro4 H1 {
PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 1.75em; COLOR: #fff; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Geneva, sans-serif
}
.centro-img {
WIDTH: 50px; HEIGHT: 50px
}
.floatderecha {
FLOAT: right; MARGIN-LEFT: 7px
}
.floatizquierda {
FLOAT: left; MARGIN-RIGHT: 7px
}
#container #conttex #centro .centro2 H1 {
PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 1.75em; COLOR: #fff; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Geneva, sans-serif
}
#derecha {
FLOAT: left; MARGIN: 0px; WIDTH: 198px; POSITION: relative; HEIGHT: auto; BACKGROUND-COLOR: #0f0
}
#derecha1 {
FONT-SIZE: 10px; FLOAT: left; MARGIN: 0px; WIDTH: 198px; HEIGHT: 162px
}
.derecha02 {
FLOAT: left; MARGIN: 8px 0px 0px; WIDTH: 100%; HEIGHT: 115px
}
.derecha2 {
FLOAT: left; MARGIN: 16px 0px 0px; WIDTH: 100%; HEIGHT: 115px
}
#derecha2-ban-tex {
FLOAT: left; WIDTH: 100%; COLOR: #000; HEIGHT: 50px
}
#footer {
CLEAR: both; FLOAT: left; WIDTH: 100%; HEIGHT: 100px; BACKGROUND-COLOR: #ccc
}
#footerPan {
MARGIN: 0px auto; WIDTH: 860px; POSITION: relative
}
#footerPan UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 20px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 800px; PADDING-TOP: 20px; POSITION: relative; HEIGHT: 30px
}
#footerPan LI {
FLOAT: left
}
#footerPan UL LI A {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; COLOR: #fff; PADDING-TOP: 0px; TEXT-DECORATION: none
}
#footerPan UL LI A:hover {
TEXT-DECORATION: underline
}
#footerPan P.copyright {
FONT-SIZE: 11px; MARGIN: 0px auto; WIDTH: 220px; COLOR: #fff; POSITION: relative
}

#container #header #header-1 H1 {
PADDING-LEFT: 8px; FONT-WEIGHT: normal; FONT-SIZE: 14px; COLOR: #fe001c; PADDING-TOP: 8px; FONT-FAMILY: Verdana, Geneva, sans-serif
}

CODIGO HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML
xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Documento sin título</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<LINK href="Documento%20sin%20título_archivos/espaname.css" type=text/css
rel=stylesheet>
<BODY>
<DIV id=container>
<DIV id=header>
<DIV id=header-1>
<H1>HOME</H1></DIV>
<DIV id=header-2>hola</DIV>
<DIV id=header-3>hola</DIV></DIV>
<DIV id=header2></DIV>
<DIV id=header3></DIV>
<DIV id=conttex>
<DIV id=izquierda>
<DIV id=izquierda1>
<p>D</p>
<p>D</p>
<p> </p>
<p>DD</p>
<p> </p>
<p>DD</p>
<p> </p>
</DIV>
<DIV id=izquierda2></DIV></DIV>
<DIV id=centro>
<DIV id=centro1></DIV>
<DIV class=centro2>
<H1>uis nullam nons at utpatem </H1>
</DIV>
<DIV class=centro3>
<P>
Exerat. Ut aut utat. Dui tatem esequi tem dolor sequissim ilit, vulla facidui sciduip susciduipit adipisim delisi ex ero odolenisi.
Unt dolobore con ex euis nim ing ea consequi blaore conulla adigna commodo loborperos nullam zzriure rostrud mincil ut alisci te tate facilisim zzriustio etum nosto eugiat, quisit lutet alit dolore molutatue molortisi eumsandipit aut velit del et ad tatissequat atie ent wismolor si blamet, cons adio od deliqui scidui blamcon ummolore mod modolor percip erit ulla facipsum nim velit ilisit, velisi.
Equis nullam nons at utpatem dolorpero odit pratue facipit delessent ea feu feuis nim iureet eugiat nullan henim quatie velenisit, sismolor sis er si.
Magnim nim autpat. Verostrud tem diamcor senim zzriustin velisl er adipisc inissim venisl utpatetum dolesectem zzril euismodipit nonulla core min ut adiametum ex eugue dit aliquat vendrerilit
.</P>

<P> </P></DIV>
<DIV class=centro4>
<H1>uis nullam nons at utpatem </H1>
</DIV>
<DIV class=centro3>
<P>laore conulla adigna commodo loborperos nullam zzriure rostrud mincil ut alisci te tate facilisim zzriustio etum nosto eugiat, quisit lutet alit dolore molutatue molortisi eumsandipit aut velit del et ad tatissequat atie ent wismolor si blamet, cons adio od deliqui scidui blamcon ummolore mod modolor percip erit ulla facipsum nim velit ilisit, velisi.
Equis nullam nons at utpatem dolorpero odit pratue facipit delessent ea feu feuis nim iureet eugiat </P>
<P>gfdsgfdgfdsgsdfgsdfgsdfg</P>
<P>f</P>
<P> </P>
<P>f</P>
<P>f</P>
<P>f</P>
<P> </P>
<P>f</P>
<P>ff</P>
<P>f</P>
<P>fd</P>
<P> </P>
<P>d</P>
<P>d</P>
<P>d</P>
<P>d</P>
<P>d</P>
<P>d</P>
<P> </P>
</DIV></DIV>
<DIV id=derecha>
<DIV id=derecha1></DIV>
<DIV class=derecha02></DIV>
<DIV class=derecha2></DIV>
<DIV class=derecha2></DIV>
<DIV class=derecha2></DIV>
<DIV class=derecha2></DIV>
<DIV class=derecha2></DIV></DIV></DIV>
<DIV id=footer>
<DIV id=footerPan>
<UL>
<LI><A href="http://www.webaselina.com">uis nullam nons at utpatem </A> </LI></UL>
<P class=copyright>uis nullam nons at utpatem </P></DIV></DIV>kiuoiu
</DIV></BODY></HTML>

Gracias por tu tiempo

Dalvenjha · #9 (**permalink**) 21/01/2009, 10:17

Uhmmmm maquetación a tres columnas con footer. Un clásico. Veamos por donde empezar:

Te doy una maquetación como las que hago para ese tipo de notas, aunque yo hago con tamaños limitados, no me gusta mucho el manejo líquido cuando va a ser info lo que debe manejarse:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pruebas</title>
<link rel="stylesheet" href="css/nuevo.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="cuerpo">
<div id="col1" class="col">

</div>
<div id="col2" class="col"></div>
<div id="col3" class="col"></div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

ese es el html y las CSS serían estas() Tienen algunos hacks para ie6, pero son cosas que no me importa corregir, se pueden poner dentro de comentarios condicionales en el html.

Código:

body,html{
margin:0;
padding:0;
width:100%;
height:100%;
}

/* Aqui comenzamos el cuerpo de la web*/
#container{
position:relative;
left:0;
top:0;
width:100%;
min-height:100%;  /*notar el min-height*/
overflow:hidden; /*notar el overflow hidden*/
}

*html #container{
height:100%;
overflow:visible; /*esto para la basura del internet explorer 6*/
}

#header{
position:relative;
left:0;
top:0;
width:100%;
height:200px;/*pon el tamaño que quieras*/
background:cyan; /*por poner un color*/
}

#cuerpo{
position:relative;
left:0;
top:0;
width:100%;
min-height:600px; /*nota el min-height*/
overflow:hidden;/*el overflow hidden lo ponemos porque es el que va a empujar la web.*/
}

*html #cuerpo{
height:600px;
overflow:visible;
}

#cuerpo div.col{
position:relative;
display:block;
left:0;
top:0;
min-height:600px;
float:left;
overflow:hidden;
}

#cuerpo #col1{
background:green;
width:33%;
}
#cuerpo #col2{
background:lavender;
width:34%
}
#cuerpo #col3{
background:steelblue;
width:33%;
}

*html #cuerpo div.col{
height:600px;
overflow:visible;
}

#footer{
position:relative;
left:0;
top:0;
width:100%;
height:60px;
background:red;
overflow:hidden;
}

Si quieres probar si se empuja el footer pase lo que pase, pues simplemente pon esto:

Código:

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

falmar · #10 (**permalink**) 21/01/2009, 15:32

Hola, eres la leche, funciona de muy bien, solo hacerte unas últimas preguntas sobre el código:

min-height:100%; /*notar el min-height*/ que significa?

overflow:hidden; /*notar el overflow hidden*/ y esta propiedad?

Muchas gracias

Un Saludo

jomaruro · #11 (**permalink**) 21/01/2009, 15:33

Hola:

Revisando tu código he visto esto:

Código:

#izquierda2 {
    BACKGROUND-POSITION: 50% top;
    Z-INDEX: 1;
    FLOAT: left;
    MARGIN: 0px;
    WIDTH: 232px;
    BACKGROUND-REPEAT: no-repeat;
    POSITION: relative;
    HEIGHT: 1300px;
    BACKGROUND-COLOR: #fa0419
}

si le pones un alto fijo de 1300 px, lógicamente te crece demasiado.

Si no es ese tu problema, solo tienes que indicarlo.

Saludos.

Mikmoro · #12 (**permalink**) 21/01/2009, 16:46

Sobre tu código, falmar, en realidad el problema es sencillo:

la caja <div id="izquierda"> que es la que contiene a la caja <div id="izquierda2"/> (la de fondo rojo), está flotada a la izquierda, lo que provoca que la caja que las contiene (<div id="container">) no crece al crecer ellas. Smplemente elimina ese float innecesario y la caja de fondo azul crecerá, y el pie se desplazará hacia abajo:

Cita:

#izquierda {background-color:#FA0419;
float:left;
height:600px;
margin:0px 0px 0px 8px;
position:relative;
width:232px;
}

(elimina ese float: left)

pr0 · #13 (**permalink**) 21/01/2009, 17:01

Hola, buenas a todos

estoy utilizando el codigo html y css facilitado por Dalvenjha pero tengo un problema.
En el caso de que yo reduzca el tamaño del header a 100px en lugar de 200 como pone Dalvenjha, entonces como el cuerpo tiene tamaño 600px pues el footer ya no llega hasta la parte inferior de la pantalla y se me keda entonces un trozo en blanco debajo del footer.

¿Alguien me dice porque ocurre esto? ¿como puedo poner para que el cuerpo ocupe todo el height independientemente de las medidas del header y footer?

Gracias de antemano

jomaruro · #14 (**permalink**) 21/01/2009, 17:08

Cita:

Iniciado por Mikmoro

(elimina ese float: left)

He copiado y pegado el código para intentar solucionar el problema y si hago lo que dices los <div id="derecha"> y <div id="centro"> se desplazan hacia abajo.

¿Me equivoco?

Saludos.

Mikmoro · #15 (**permalink**) 21/01/2009, 17:35

Ah, sí, sí, cierto, no estaba mirando bien la composición.

En este caso creo que lo mejor es añadir overflow al contenedor:

Cita:

#conttex {background-color:#33CCFF;
height:1000px;
margin:0px;
position:relative;
overflow:auto;
}

Dalvenjha · #16 (**permalink**) 21/01/2009, 23:31

Cita:

Iniciado por falmar

Hola, eres la leche, funciona de muy bien, solo hacerte unas últimas preguntas sobre el código:

min-height:100%; /*notar el min-height*/ que significa?

overflow:hidden; /*notar el overflow hidden*/ y esta propiedad?

Muchas gracias

Un Saludo

El min-height es una propiedad que utiliza el firefox, para darle un tamaño mínimo a un div. Y el overflow hidden, es una propiedad que hace que todo lo que desborde del tamaño de un contenedor se esconda.

Combina ambas por lo siguiente: Si le dieras un height directo, el overflow hidden funcionaría normal, osea escondería lo que se pasa del tamaño, pero como usamos un min-height, entonces la caja irá creciendo y como no hay un tamaño real, el overflow no tiene nada que esconder porque nada desborda, asi que en vez de esconder, hace crecer el div.

Hay otra orden: overflow:visible. pero este tiene diferente manera de funcionar en firefox y en IE, en firefox se mostrará lo desbordado pero no crecerá el fondo. En cambio en IE se mostrará lo desbordado y crecerá el fondo. Es por eso que ves que uso el hack del asterisco para dejar a ie con el height y overflow visible. Esto tb es porque IE6 no admite la propiedad min-height.

Saludos.

Dalvenjha · #17 (**permalink**) 21/01/2009, 23:34

Cita:

Iniciado por pr0

Hola, buenas a todos

estoy utilizando el codigo html y css facilitado por Dalvenjha pero tengo un problema.
En el caso de que yo reduzca el tamaño del header a 100px en lugar de 200 como pone Dalvenjha, entonces como el cuerpo tiene tamaño 600px pues el footer ya no llega hasta la parte inferior de la pantalla y se me keda entonces un trozo en blanco debajo del footer.

¿Alguien me dice porque ocurre esto? ¿como puedo poner para que el cuerpo ocupe todo el height independientemente de las medidas del header y footer?

Gracias de antemano

Simple, aumentale el tamaño al cuerpo para compensar.

Saludos.

Hey Leí mal tu pregunta, bueno, mira lo que yo hago, para combinar medidas líquidas con fijas es usar javascript, es lo que hagó en mi website, en la página principal.

http://remsr.com

Entra luego achica la pantalla y has f5 y verás que siempre el header y el footer ocupan el mismo lugar. Para lograr eso hice lo siguiente.

Código:

<!--
	function redimensionar() {
		
			var altura = (window.innerHeight - 162);
			var altura = (document.body.clientHeight - 162);
			document.getElementById('cuerpo').style.height = altura+'px';
		    
	}
//-->

y lo llamas asi:

<body onload="redimensionar();">

Vamos por partes, aqui lo que estoy haciendo, es calcular el alto de la ventana del navegador, entonces, si por ahi tengo un header y footer que sumados den 162 pixeles. Lo que hará es darle al div "cuerpo" el tamaño de la ventana menos el tamaño de tu header y footer. Ahora bien, como en tu css ya he especificado bien que las posiciones son relativas y donde van acomodados, el div "cuerpo" se acomodará solito.

Saludos!!

a77icu5 · #18 (**permalink**) 22/01/2009, 23:38

Parece que hoy todos se pelean con height, se ve interesante el uso de javascript, ahi te va la version mas famosa en css

height: auto !important;
min-hight: 500px;
height:500px;

500px es solo un ejemplo, aca mezclamos 2 cosas, la primera como ya te explicaron es min-height, el problema es que en cierto navegador no lo interpreta, agregando las 2 lineas anteriores ya tendras los mismos resultados en un navegador decente como en IE.

esta es mi version de tu maquetacion, espero te sirva.

#container {width:auto; height: auto !important; margin: 0px auto;padding: 2px; }
#header { height: 100px; width:auto; background:#CCC; }
#left { width:25%; background:#999;}
#content {width:50%; background:#666;}
#right{width:25%; background:#999;}
#left, #content, #right {float:left; height:auto !important; min-height:300px; height:300px;}
#header, #left, #content, #right, #footer {margin:0px auto; padding:0px; position:relative; }
#footer{height:50px; width:auto; background:#333;}
.clear{clear:both;}

<div id="container">
<div id="header">
texto del header
</div>
<div class="clear"></div>
<div id="left">
texto columna izquiera
</div>
<div id="content">
contenido de la pagina
</div>
<div id="right">
texto columna derecha
</div>
<div class="clear"></div>
<div id="footer">
pie de pagina.
</div>
</div>

Creo que no olvido nada, respecto a las columnas laterales, no es muy "bonito" que una quede mas grande que la otra, en internet haber unos articulos sobre 'faux columns' para darles una mejor vista en estos casos, suerte.