Ya vimos en un artículo anterior una manera de realizar una maquetación con CSS a tres columnas. Ahora vamos a realizar unos cambios sencillos para mejorar algo el código del anterior artículo.

Antes que nada habría que explicar por qué estimamos que puede mejorarse el ejercicio de maquetación a tres columnas, tal y como fue planteado anteriormente. Se trata simplemente de mejorar la organización del contenido de la página de una manera más inteligente.

A mi me gusta siempre ver el aspecto que tiene una página web sin la hoja de estilo en cascada, para ver si la información tiene sentido y orden tal y como se ha colocado en el código HTML. Es decir, si está presentada de una forma adecuada, aunque no se estén visualizando los estilos definidos en el CSS.

Cualquier navegador que no tenga soporte a CSS mostrará la página sin ningún estilo y todos los elementos aparecerán uno detrás de otro según se hayan colocado. No es habitual que nos visite una persona que tenga un navegador incompatible con hojas de estilo en cascada, pero para mejorar la accesibilidad de las páginas, también conviene que se lean bien, aunque no se tenga acceso a CSS.

Así se vería la maquetación CSS a tres columnas sin la declaración de estilos que habíamos presentado en el anterior ejemplo. Si pulsamos el enlace podremos comprobar que aparece el banner vertical en la parte superior de la página, cuando lo interesante sería que apareciera debajo del contenido, por lo menos en mi opinión.

Variación al ejercicio anterior para maquetar a tres columnas

Básicamente vamos a hacer una maquetación a dos columnas, la izquierda, con la barra de navegación y la de la derecha, con el otro contenido. En la parte de la derecha, a su vez, haremos dos columnas más, una a la izquierda que tendrá el texto de la página y otra a la derecha, con la barra lateral derecha.

En realidad, el ejercicio queda muy similar. Veamos el código HTML:

<div id="contenedor"> 
    <div id="cabecera"> 
       Cabecera 01 
    </div> 
    <div id="cuerpo"> 
       <div id="lateral"> 
          <ul> 
             <li><a href="#">Enlace 1</a> 
             <li><a href="#">Vínculo 2</a> 
             <li><a href="#">Otro enlace</a> 
             <li><a href="#">Link chulo</a> 
             <li><a href="#">Más enlaces</a> 
             <li><a href="#">Otro último</a> 
          </ul> 
       </div> 
       <div id="derecha"> 
         	<div id="principal"> 
            	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
            	…… 
         	</div> 
         	<div id="otrolado"> 
            	<img src="bannerlateral.gif" width="120" height="600" alt=""> 
         	</div> 
       </div> 
    </div> 
    <div id="pie"> 
       © 2005 DesarrolloWeb.com 
    </div> 
</div>

La capa "derecha" es la que hemos creado nueva, donde colocamos tanto el texto principal como la capa del banner vertical.

El código CSS que hemos variado sólo afecta a la capa "derecha", que no estaba creada anteriormente y a la capa "principal", que es donde está el texto central.

#derecha{ 
   	margin: 0 0 0 170px; 
}

#principal{ 
    background-color: #ffffff; 
    padding: 4 4 4 4px; 
    width: 460px; 
    float: left; 
}

La capa "derecha" tiene un margen de 170 pixels, para dejar espacio a la barra de enlaces de la izquierda. La capa "principal", que antes tenía ese margen de 170 píxeles, ya no lo necesita, pero en cambio sí que hemos puesto el atributo float: left, para que se flote en la parte de la izquierda.

En definitiva, es una maquetación a dos columnas, en las que una de las columnas tiene a su vez otra maquetación en dos columnas.

Se puede ver el ejemplo en marcha en una página aparte. El código fuente del ejemplo entero no lo vamos a escribir. Pero se puede analizar tanto el HTML como el CSS a través de la opción "ver código fuente" del navegador.

Se puede ver cómo quedaría esta maquetación a tres columnas si nuestro navegador no fuera compatible con CSS.