Variación de la maquetación con CSS a 3 columnas

  • Por
  • CSS
Mostramos una mejora al código mostrado anteriormente para maquetar una página con CSS a tres columnas.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Alexis Advance

10/9/2010
Sobre este ejercicio
Opino que solamente era necesario intercambiar las capas «otrolado» y «principal» en el código html. Con eso se obtiene el resultado deseado.

mariox55

20/9/2010
Agradecido
Muchisimas gracias de verdad. Exelente material de consulta.

JoseLpadi

06/1/2012
cambiar otrolado con principal
si, es verdad. el tema es que otrolado queda abajo. Habria alguna forma de que quede al lado de principal?

Pablo Daniel Almada

24/7/2012
Capa otrolado
Hola
Fijate josepal que la capa principal no haya quedado con un margen extra que no hace falta. Yo tenia un margen derecho en la capa principal y lo saque. Asi me anduvo
Aveces pasa esto porque el la suma de los anchos de las capas que esta en el contenedor es mayor que el ancho del contenedor , entonces una de las capas se coloca abajo ya que no cabe de ancho.

Vicente

19/7/2013
Detectado malware
Hola, sólo indicar que al intentar entrar en la página 'Maquetación con mapa google...'
me salta el kaspersiky con un aviso en ROJO, que me impide entar por dicho motivo.

Espero que revisen por si no fuera cierto.??