Como dividir una página web correctamente en HEADER / BODY / FOOTER

La forma fácil 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.