La típica distribución de una página web

Distribución típica de una página web
Distribución típica de una página web

Esta es la distribución típica de una página web.  Esta compuesta por los siguientes elementos.

  • Cabecera.
  • Columna izquierda.
  • Contenido central.
  • Columna derecha.
  • Pies.

De acuerdo con los estándares actuales, es preferible utilizar divs en lugar de tables (donde sea humanamente posible) ya que el documento HTML debería encargarse de definir el contenido mientras que a través de la definición de estilos (CSS) se debería establecer la presentación, es decir, como se ordena y distribuye el contenido a lo largo y ancho de la página web.

Como lo he mencionado en otras ocasiones para mi CSS es todavía una ciencia oculta, hay muchas cosas que frecuentemente se me enrredan cuando utilizo CSS.  Sin embargo ultimamente lo he estado utilizando un poco mas y he adquirido mas práctica y cada vez me siento mas a gusto con utilizándolo.

Ahora implementar este diseño es algo sencillo para mi … bueno, casi.

Parto de la siguiente estructura de contenido.

        <div id='pagina'>
            <div id='cabecera'>
                Cabecera <br />
            </div>

            <div id='colizq'>
                Columna Izquierda <br />
            </div>

            <div id='contenido'>
                Contenido <br />
            </div>

            <div id='colder'>
                Columna Derecha <br />
            </div>

            <div id='pies'>
                Pies
            </div>
        </div>

El resultado inicial es claramente inaceptable.

Resultado #1
Resultado #1

Agregamos un poco de estilo para enrriquecer a la presentación.

    #pagina
    {
        width: 1024px;
        margin: auto;
        background-color: pink;
    }

Con esto le damos un ancho suficiente para visualizar correctamente el contenido del sitio y lo centramos para que se vea bonito en monitores mas anchos.

    #cabecera
    {
        padding: 5px;
        background-color: orange;
    }

    #colizq
    {
        padding: 5px;
        background-color: yellow;
        width: 300px;
    }

    #contenido
    {
        padding: 5px;
        background-color: blue;
        width: 394px;
    }

    #colder
    {
        padding: 5px;
        background-color: red;
        width: 300px;
    }

    #pies
    {
        padding: 5px;
        background-color: green;
    }

Les damos colores diferentes a cada una de las partes para diferenciarlas, un padding para separar un poco el borde del contenido de cada uno de los divs y en el caso de la parte central, el ancho específico que se requiera.

Resultado #2
Resultado #2

Ya tiene cara de algo, pero no necesariamente lo que estamos buscando.  Es necesario ordenar las columnas izquirda, centro y derecha para que se ubiquen de la forma como sus mismos nombres lo indican.

En CSS esto equivale a decirle a los divs que floten (float) en la dirección que queramos.

    #colizq
    {
        float: left;
        padding: 5px;
        background-color: yellow;
        width: 300px;
    }

    #contenido
    {
        float: left;
        padding: 5px;
        background-color: blue;
        width: 394px;
    }

    #colder
    {
        float: left;
        padding: 5px;
        background-color: red;
        width: 300px;
    }

El atributo adicionado les indica a los divs que vayan flotando y arreglándose a la izquierda cada vez que son agregados a la presentación.

Resultado #3
Resultado #3

En algunos casos, cuando continúan mas divs y necesitamos que se alineen en una la siguiente fila, es necesario indicarle a un div específico que no permita que otros divs floten a uno/ninguno de sus lados.  Para esto se utiliza el atributo clear (left, right, none, both).

Para el caso de la sección de los pies se complementaría de la siguiente manera.

    #pies
    {
        padding: 5px;
        background-color: green;
        clear: left;
    }

Hasta ahí todo es muy fácil: un pequeño paso para el lector, pero hace un año fue un gran paso para mi.  Pero aún me queda una duda por solucionar.

Qué pasa cuando las columnas -patriotas- tienen altos de diferente longitud ?

Resultado #4.
Resultado #4.

Se nota ese sobrante rosado bajo las columnas izquierda y derecha ?

Si revisamos las clases CSS, la rosada es la #pagina, esto significa que #colizq y #colder no están ocupando el mismo espacio vertical que #contenido hasta #pies y está dejando ver la capa inmediatamente inferior.

Para los “diseños” que comúnmente utilizo esto no es un problema ya que me gustan los diseños minimalistas y el blanco es mi fondo preferido.  Pero que va a pasar el día en que necesite que una columna sea de un fondo diferente del resto ?

Mi pregunta es: cómo hago para que las columnas ocupen la totalidad del espacio vertical disponible entre #cabecera y #pies ?  La duda persiste.

Enlace: código de demostración.

2 thoughts on “La típica distribución de una página web”

  1. Hola.
    Lo de la altura de las columnas tendría una fácil solución si todos los navegadores respetaran los estándares, bla bla… Usando display: table para el bloque contenedor y display: table-row para cada una de las columnas se conseguiría este efecto. Ejemplo (no funciona en IE) en http://uninstallme.com/ejemplos/test_columnas_misma_altura/con_css/

    Pero como esto no funciona en Explorer, hay que recurrir a otras técnicas como la que proponen en CSS Lab: http://www.csslab.cl/2007/10/11/100-alto-finalmente-para-todos/
    o bien usar imágenes de fondo para simular la continuidad de la columna o javascript para calcular la altura de la columna más alta y dar la misma a las demás.
    La técnica de CSS Lab da problemas con las anclas.
    Saludos.

  2. Saludos @kcmr, muchas gracias por tu aporte.

    Como mencionas, probé el sitio de uninstallme.com con Firefox/Opera y funcionó perfectamente, con IE se descompuso completamente. Definitivamente es imposible pasar mas de 30 segundos desarrollando software web sin tener problemas con IE.

    Te agradezco por las explicaciones y técnicas que nos muestras respecto al artículo.

Leave a Reply

Your email address will not be published. Required fields are marked *