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 />