jueves, 10 de abril de 2014

alinear un DIV o capa en la parte inferior (bottom) de otro

He desarrollado un pequeño ejemplo de como realizar una alineación inferior de una capa con CSS y sin utilizar atributos vertical-align.

el codigo sería este:


<html>
<head>
<title>http://jesusmgcia.blogspot.com.es/</title>

<style>
body{
margin: 0px;
background: #dddddd;
}

.capaPrincipal{
float: left;
position: relative;
width: 100%;
height: 200px;
padding: 0px;
background: #12345F;
font-size: 48px;
color:#ffffff;
}

.pie{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
min-width: 1020px;
height: auto;
padding: 0px;
background: #FF7869;
font-size: 18px;
color:#000000;
}


</style>
</head>

<body>
<div class="capaPrincipal">
Capa principal - <a HREF="http://jesusmgcia.blogspot.com.es/">http://jesusmgcia.blogspot.com.es/</a>
<div class="pie">Aqui pintaremos la informacion que se alineara en la parte de abajo de la capa principal</div>
</div>


</body>

</html>
Copiar el codigo de arriba en un fichero .HTML para ver el resultado

</body>

</html>


en
Etiquetas: ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)

Jesús Moreno - Ingeniero Ténico Informático - consultor Informático

Hola, soy Jesús Moreno Ingeniero Técnico Informático en sistemas por la US y propietario de éste blog. Mi trabajo en los ultimos años se ...