martes, 18 de enero de 2011

Alinear un DIV hacia abajo

Si deseas que un div este alineado verticalmente hacia abajo solo necesitas 3 estilos con CSS y todo queda muy bien. Primero debes de fijar la propiedad POSITION del contenedor a RELATIVE, luego al div que deseas alinear hacia abajo las propiedades BOTTOM a 0px y POSITION a ABSOLUTE. Eso es todo, sencillo ¿no?

Aquí les dejo un ejemplo de como seria implementado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
.content
{
position:relative;
height:500px;
}
.copyright
{
bottom: 0px; 
position: absolute;
}
</style>
</head>
<body>

<div class="content">
<p>texto texto texto texto texto texto texto</p>
    
    <div class="copyright">Copyright Copyright Copyright Copyright Copyright</div>
</div>

</body>
</html>

5 comentarios: