Variacin de la maquetacin con CSS a 3 columnas

Mostramos una mejora al cdigo mostrado anteriormente para maquetar una pgina con CSS a tres columnas.

Ya vimos en un artculo anterior una manera de realizar una maquetacin con CSS a tres columnas. Ahora vamos a realizar unos cambios sencillos para mejorar algo el cdigo del anterior artculo. Antes que nada habra que explicar por qu estimamos que puede mejorarse el ejercicio de maquetacin a tres columnas, tal y como fue planteado anteriormente. Se trata simplemente de mejorar la organizacin del contenido de la pgina de una manera ms inteligente. A mi me gusta siempre ver el aspecto que tiene una pgina web sin la hoja de estilo en cascada, para ver si la informacin tiene sentido y orden tal y como se ha colocado en el cdigo HTML. Es decir, si est presentada de una forma adecuada, aunque no se estn visualizando los estilos definidos en el CSS. Cualquier navegador que no tenga soporte a CSS mostrar la pgina sin ningn estilo y todos los elementos aparecern uno detrs de otro segn 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 pginas, tambin conviene que se lean bien, aunque no se tenga acceso a CSS. As se vera la maquetacin CSS a tres columnas sin la declaracin de estilos que habamos presentado en el anterior ejemplo. Si pulsamos el enlace podremos comprobar que aparece el banner vertical en la parte superior de la pgina, cuando lo interesante sera que apareciera debajo del contenido, por lo menos en mi opinin. Variacin al ejercicio anterior para maquetar a tres columnas Bsicamente vamos a hacer una maquetacin a dos columnas, la izquierda, con la barra de navegacin y la de la derecha, con el otro contenido. En la parte de la derecha, a su vez, haremos dos columnas ms, una a la izquierda que tendr el texto de la pgina y otra a la derecha, con la barra lateral derecha. En realidad, el ejercicio queda muy similar. Veamos el cdigo 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="#">Vnculo 2</a> <li><a href="#">Otro enlace</a> <li><a href="#">Link chulo</a> <li><a href="#">Ms 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 cdigo CSS que hemos variado slo 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 tena ese margen de 170 pxeles, 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 maquetacin a dos columnas, en las que una de las columnas tiene a su vez otra maquetacin en dos columnas. Se puede ver el ejemplo en marcha en una pgina aparte. El cdigo fuente del ejemplo entero no lo vamos a escribir. Pero se puede analizar tanto el HTML como el CSS a travs de la opcin "ver cdigo fuente" del navegador. Se puede ver cmo quedara esta maquetacin a tres columnas si nuestro navegador no fuera compatible con CSS.