La forma facil y la mejor para que nuestra web esté correctamente dividida en bloques, es dividiendo el contenido en 3 zonas:
Head
Body
Footer
Y que estos, por mas que se cambie el tamaño de la pantalla siempre estén bien ubicados.
El truco es el siguiente:
1-Añadimos el contenedor a nuestra web:
2-Luego desde nuestra hoja de estilo, llamamos a los diseños y le aplicamos los cambios:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
}
Y voila!, ya tenemos nuestro contenido dinamico y formateado con DIV y CSS.
Tambien si queremos dividir el contenido con un div en dos partes, es decir si queremos ubicar algo a la izquierda de nuestra web y algo a la derecha, solo debemos añadir los siguientes datos:
Div principal:
Y luego el estilo:
.wrapperpibe{position:relative;}
.rightpibe,.left{width:10%; position:absolute;}
.rightpibe{right:0;}
.leftpibe{left:0;}
Y voila! ya tenemos nuestro contenido dividido en dos partes y forzados a que cada uno vaya a su lugar.
Espero que les resulte util.
Salu2.
