Posicionamiento de contenedores con CSS

Bueno, antes que nada, debemos aclarar ¿Qué es un contenedor?

Todo elemento de un documento HTML, es considerado como un contenedor o caja rectangular invisible al usuario y a la cual se le pueden aplicar ciertas propiedades para ubicar los elementos respecto a otros.

Por ejemplo, si pudiéramos "visualizar" una línea al rededor de los elementos HTML que estamos programando, veríamos algo como lo siguiente:

Básicamente, todos los contenedores de HTML, tienen las mismas partes:

El elemento en sí mismo.
El espacio de relleno que rodea al elemento HTML.
El borde que rodea al elemento y al relleno.
El margen que tiene ese contenedor con respecto a otros contenedores.

Una vez explicado esto, pasemos al ejemplo #1 de una página web cuyas secciones están divididas por 5 contenedores:

Un contenedor principal que agrupa todo el contenido al centro de la página web y deja unos márgenes a la izquierda y a la derecha del navegador.
Un contenedor para contener la cabecera de la página web.
Un contenedor que alberga al menú de navegación lateral a la izquierda de la pagina web.
Un contenedor que tendrá el contenido principal de la página web .
Un contenedor para tener el pie de página.

La página web resultante quedará como la siguiente imagen:

Empezamos....

CREAR EL CONTENIDO HTML

El código HTML para crear la estructura no es algo del otro mundo. Simplemente se han creado varios elementos "<div>" y se les ha asignado un identificador con el atributo "id=nombre":

ENLAZAR UNA NUEVA HOJA DE ESTILOS AL CÓDIGO HTML

El siguiente paso será enlazar la hoja de estilos. Como se recordará, la línea de código necesaria para lograrlo es:

Esta línea deberá insertarse ANTES de cerrar la etiqueta <head>:

Quedando la sección <head> de la siguiente forma:

Si visualizamos el archivo HTML recién creado se debería ver así:

PASAMOS A ESCRIBIR EL CSS:

CENTRAR EL CONTENEDOR PRINCIPAL

Temporalmente, para que pueda apreciarse como queda centrado del contenedor principal, se le aplicará un color de fondo gris, el cual quedará oculto posteriormente al aplicarle los estilos a los demás contenedores.

Código CSS:

Visualización:

ASIGNAR EL COLOR DE FONDO AL CONTENEDOR "CABECERA":

Código CSS:

Visualización:

ASIGNAR EL COLOR DE FONDO AL CONTENEDOR DEL MENÚ LATERAL:

Código CSS:

Visualización:

ASIGNAR EL COLOR DE FONDO AL CONTENEDOR DEL CONTENIDO PRINCIPAL:

Código CSS:

Visualización:

ASIGNAR EL COLOR DE FONDO AL PIE DE PÁGINA:

Código CSS:

Visualización:

Ahora, si somos observadores, existe un espacio vacío entre cada contenedor, puesto que el color gris del contenedor principal aun puede visualizarse. Ese espacio pertenece a los elementos <h1>, los cuales de forma predeterminada, tienen un margen de unos cuantos pixeles al rededor de ellos. Para eliminar ese pequeño margen, hay que escribir lo siguiente:

Código CSS:

Visualización:

Vamos a ponerle un poco de relleno a cada uno de los elementos <h1> para que se parezcan mas a la imagen que tenemos en la maqueta inicial:

Código CSS:

Visualización:

Ahora viene la "magia" del posicionamiento de contenedores. Primero hay que poner a "flotar" al contenedor del menú izquierdo y asignarle un tamaño: digamos del 25% con respecto al contenedor principal. Al hacerlo, veremos que todos los elementos que se encuentran después del contenedor automáticamente suben para ocupar el lugar que tenia el elemento que se ha puesto a flotar:

Código CSS:

Visualización:

Lo mismo pasará con el contenedor "contenido", solo que este flotará del lado derecho y le asignaremos el 75% de tamaño restante (con respecto al contenedor principal).

Código CSS:

Visualización:

Ahora podemos ver que el pie de página ha subido, ya que los contenedores izquierdo y derecho están flotando y han dejado libre el lugar que ocupaban. Para evitar que el pie de página ocupe ese lugar que no le corresponde, existe la instrucción clear la cual "limpia" lo que exista a la derecha o izquierda del contenedor al cual se le asigne y si encuentra algo (en este ejemplo: los contenedores flotantes) automáticamente realizará un salto de línea para posicionarse una nueva línea en donde no esté flotando nada.

Código CSS: