Hola:
Estoy intentando alinear un div con una imagen en la parte inferior de otro div con un float:left, pero no encuentro la forma.
La idea es la siguiente:
<div id="pagina">
<div id="encabezado"></div>
<div id="menu"></div>
<div id="contenido"></div>
<div id="bajomenu">
<div id="degsup"></div>
<div id="deginf"></div>
</div>
<div id="pie"></div>
</div>
#pagina{
width: 711px;
overflow:auto;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#encabezado{
width:711px;
float:left;
}
#menu{
width:200px;
float:left;
}
#bajomenu{
width:200px;
float:left;
clear:left;
background-image:url(imag/arabesco.png);
background-repeat: repeat-y;
}
#contenido{
width:500px;
float:right;
}
#pie{
width:711px;
float:left;
}
Lo que quiero hacer con esto es que, como cuando el contenido es muy grande, queda mucho espacio bajo el menú, quiero meter una imagen que se repita desde que termina el menú hasta llegar al pie, con dos div, una en la parte superior de la capa, y otra en la parte inferior, que contienen un imagen con un degradado de transparente a blanco, para la que imagen que se repite comience con un degradado, y termine con otro.
Pues el primer problema que me he encontrado es que el height del div #bajomenu no llega hasta el pie, y el segundo es que, el div que contiene la imagen con el degradado que va en la parte inferior(#deginf) no lo puedo alinear en la parte de abajo del div #bajomenu.
Gracias