Hola que tal.
Estoy haciendo una maquetación a 3 columnas y me han surgido dos problemas:
- ¿Porqué el cuadro azul no me llega hasta el pie? Es curioso porque si hago la ventana del navegador mas grande o mas pequeña, el borde inferior del cuadro azul tabién se mueve, guardando siempre la misma distancia a la base.
- En algunas subpáginas las 3 columnas serán sólo 2, eliminándose la tercera, la de <div id="otrolado">, pero en ese caso, el cuadro azul, que es el que contiene la columna 2 y 3 no se ajusta al borde derecho.
¿Alguien sabe porqué ocurre esto? Os dejo los códigos, gracias! :
Código HTML:
<html>
<head>
<title>css</title>
</head>
<body>
<div id="contenedor">
<div id="cuerpo">
<div id="lateral"><img src="bannerlateral.gif" width="120" height="1000" alt="">
</div>
<div id="derecha">
<div id="principal"> TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
<p> TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
</div>
<div id="otrolado"> <img src="bannerlateral.gif" width="120" height="600" alt="">
</div>
</div>
</div>
<div id="pie"> PIE </div>
</div>
</body>
</html> Código HTML:
body {
margin: 0 0 0 0px;
text-align: center;
}
#contenedor{
text-align: left;
background-color: green;
width: 900px;
margin: auto;
}
#cuerpo{
margin: 0px;
position : relative;
}
#lateral{
width: 150px;
float:left;
background-color: red;
}
#principal{
width: 488px;
float: left;
}
#otrolado{
width: 260px;
float: right;
padding: 0px;
}
#pie{
background-color: #cccccc;
padding: 3 10 3 10px;
text-align:right;
clear: both;
}
#derecha{
margin: 0px;
background-color: blue;
border: 1px solid #000;
float: left;
height: 100%;
}