Hace unos días pregunté cómo pocisionar un pie. Se me ofreció una solución que creo que es la que está en las faqs del sitio. Sin embargo no me anduvo, porque cuando el contenido es más corto que el alto de la pantalla, el pie sube. Si alguien tiene alguna otra solución para aportar, se lo agradezco.
Pongo el código de mi página por si alguien está dispuesto a buscar el error que no me permite colocar el pie.
Gracias por adelantado.
CSS
/*================================================= ================================================
Propiedades generales
================================================== ==============================================*/
*{
margin:0;
padding:0;
}
html, body{
height:100%;
background-color:#999;
}
body{
background-image:url(interfaz/fondo.jpg);
background-repeat:repeat-x;
}
#contenedor{
width:970px;
height:100%;
min-height:100%;
margin:0 auto;
background-color:#CCC;
}
#caja_datos{
width:100%;
background-color:#CCC;
background-image:url(graficos/degradado.jpg);
background-repeat:repeat-x;
}
.pie
{
width:100%;
height:24px;
background-color:#BF1C47;
bottom:0px !important;
clear:both;
}
.separador
{
height:5px;
clear:both;
}
/*================================================= ================================================
Propiedades del menú y los vínculos
================================================== ==============================================*/
#cabezal{
width:100%;
height:240px;
background-image:url(graficos/fondocabezal.jpg);
}
#logo{
float:left;
width:310px;
height:120px;
background-image:url(graficos/logo.jpg);
margin: 0 10px;
}
#contenedor ul li{
float:left;
width:128px;
height:50px;
text-align:center;
list-style-type:none;
}
#contenedor a{
display:block;
width:100%;
height:100%;
font-size:110%;
font-weight:bold;
line-height:50px;
text-decoration:none;
}
/*================================================= ==================================================
Propiedades de las columnas contenedras de datos
================================================== =================================================*/
.col_izq
{
/*position:relative;*/
float:left;
width:300px;
padding:10px;
height:100%;
margin:10px;
background-color:#FFF;
}
.col_der
{
float:left;
width:630px;/*CORREGIR*/
height:100%;
margin:10px 0;
background-image:url(graficos/degradado_corto.jpg);
background-repeat:repeat-x;
background-color:#CCC;
}
.novedades, .publicidad
{
float:left;
width:290px;
height:180px;
padding:10px;
background-color:#FFF;
overflow:hidden;
}
.novedades
{
width:280px;
margin-right:10px;
}
.articulo_principal
{
width:600px;
background-color:#FFF;
margin-top:10px;
padding:10px;
}
/*================================================= ==================================================
Colocación de los contenidos
================================================== =================================================*/
.foto_izq
{
width:150px;
height:150px;
margin:10px;
float:left;
background-color:#009900;
}
.titulos {
color: #0000FF;
}
p
{
text-align:justify;
}
.formulario
{
text-align:center;
}
HTML
<body>
<div id="contenedor">
<div id="cabezal">
<div id="logo">
</div>
<ul>
<li><a href="index.html">Portada</a></li>
<li><a href="acerca.html">Acerca de...</a></li>
<li><a href="productos.html">Productos</a></li>
<li><a href="servicios.html">Servicios</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</div>
<div id="caja_datos">
<div class="col_izq"><p class="titulos">Titular noticia</p><div class="foto_izq">Espacio para foto</div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
</div>
<div class="col_der">
<div class="novedades"><p class="titulos">Titular noticia</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="publicidad">
<p class="titulos">Titular noticia</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when...</p>
</div>
<div class="separador"></div>
<div class="articulo_principal">
<p class="titulos">Titular principal</p><div class="foto_izq">Espacio para foto</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
</div>
</div>
<div class="separador"></div>
<div class="pie formulario">El aborrecido pie</div>
</div>
</div>
</body>
