Posicionar un div dentro de otro
Tengo una duda que quizá sea sencilla pero me está volviendo loco.
En una página web creo un contenedor centrado a la página, dentro de este div tengo otro llamado cabecera, y dentro de este otro llamado titulo. El div cabecera es tan ancho como el contenedor, el ancho se lo defino con la propiedad width. El div titulo es más pequeño, tanto de ancho como de alto.
El problema es que quiero que el div titulo aparezca a la derecha y abajo del cabecera. A la derecha lo consigo con la propiedad text-align=right en cabecera, pero no consigo nada con la propiedad vertical-align. La ignora tanto en firefox como en rekonq, y no encuentro nada por la red que me saque de dudas.
¿Qué hago mal?
1 Respuesta
Vamos a ver. Creo que te entiendo a medias.
Dices que el div titulo está dentro del div cabecera, pro luego dices que quieres que el titulo esté debajo del cabecera. Si quieres que esté debajo no lo pongas dentro sino a continuación del cabecera.
Piensa que por defecto los <div>, como elementos de bloque que son, siempre ocupan todo el ancho disponible si no les especificas otra cosa. Y no uses vertical-align para alinear bloques de la página, pues no es para eso. Su principal uso es para alinear las imágenes con el texto que les precede. En todo caso debes usar el float:right.
De todos modos, lo mejor será que me mandes un poco de código (aunque sea resumido) y yo te lo corrijo y adapto.
Miquel
Hola Miquel, el div titulo está dentro del div cabecera, pero en su esquina inferior derecha.
html:
<div id="cabecera">
<div id="titulo">
Don Pedro Gil
C/ Mechero, 5
Santander
</div>
</div>
css:
#cabecera
{
height: 159px;
width: 1024px;
background: url(images/logo.jpg) no-repeat;
border-bottom: 1px solid gray;
}
#titulo
{
float: right;
font-size: 0.8em;
}
El div cabecera básicamente marca una determinada zona con el logo de fondo a la izquierda, y en la esquina inferior derecha aparece la información de contacto, que es el div titulo.
Ahora ya entiendo bien. Realmente, lo mejor es un poco de código.
Yo pondría en el div titulo lo siguiente:
#titulo {
float: right;
text-align: right;
margin-top: 100px; /*o lo que necesites*/
margin-right: 20px; /*o lo que quieras*/
font-size: 0.8em;
width: 300px; /*o lo que necesites*/
}Así se te queda a la derecha y a la distancia que quieras desde arriba y desde la derecha. Retocando los margin controlas fácilmente la ubicación del div.
Y con esto espero que ya te quede como deseas.
Miquel
