Layout básico – 3 columnas

4/nov/2005 9

Como primer artículo, mostraré cómo construir un layout con 3 columnas tableless, o sea, sin tablas, sólo con CSS.
Se construyen 3 ‘columnas’ con ‘div’ en HTML bruto:

<div id="todo">
   <h1>Layout con 3 Columnas</h1>
<div id="izquierda">Izquierda</div>
<div id="derecha">Derecha</div>
<div id="contenido"> <p>Contenido</p> </div>
</div>

Luego, comenzaremos a darle estilo con CSS. Aquí se definirán parámetros, primero, para el ancho del div contenedor #todo:

#todo {
   width:700px;  
}

Le fijamos el ancho a la columna de la derecha y de la izquierda:

#izquierda, #derecha {
   width:150px;  
}

y no nos olvidemos de la columna central:

#contenido {  	
   width:370px;  
}

Queda darle la posición a cada columna, para esto usaremos float:

#izquierda {  	
   float: left;  
}    
#derecha {  	
   float: right;  
}

Y le fijamos un margen para el div del centro, para que la columna de la izquierda no se vea afectada:

#contenido {  	
   margin-left: 160px;
}

Ver resultado final

El mismo pero con colores:

#todo { 
   width:700px; 
   background-color: #666;
}
h1 { font-family: Georgia, Tahoma; color: #FFF; text-align: center; }
#izquierda, #derecha { width:150px; background-color: #333; font-family: Georgia, Tahoma; color: #FFF; text-align: center; }
#contenido { width:370px; background-color: #FFCC00; font-family: Georgia, Tahoma; color: #333; text-align: center; font-weight: bolder; }
#izquierda { float: left; } #derecha { float: right; }
#contenido { margin-left: 160px; }

Listo, la estructura está terminada. Ahora, a darle más estilos y llenar el contenido del sitio.

Comentarios

  1. Ismael [#]

    Tengo una pequeña crítica:
    Izquierda
    Qué pasa si el cliente te dice que pongas esa misma columna a la derecha modificando sólo el CSS (me ha pasado que, por motivos varios, tienes que rediseñar sin acceso al HTML, sólo al CSS). Tu id=”izquierda” será confusa. En general es recomendable no usar id’s o class relacionadas al diseño, sino a la estructura del contenido. En este caso sería mejor escribir:
    Izquierda
    Lo mismo pasa con los clásicos class=”texto-rojo”. Qué pasa si despues el texto tiene que ser verde? Es mucho mejor poner class=”texto-destacado” y despues le pones el color que quieras en CSS.

  2. Administrador [#]

    Ismael: Gracias por tu percepción, pero como verás, esto es un layout básico. tienes sus pro’s y contras. encontraste un contra. depende del desarrollador modificarlo a su antojo. espero posteriormente poder cubrir todos los aspectos de estructuración de layout.

    Respecto a lo de las etiquetas relacionadas con propiedades subjetivas (color, forma), totalmente de acuerdo. Saludos.

  3. andres [#]

    Hola, esto me aslata como duda… al tener todo contenido en entremedio de una etiqueta no se presenta el mismo problema que al poner todo dentro de una tabla y que el browser se quede esperando el cierre de esa etiqueta antes de mostrarlo todo?

  4. Administrador [#]

    porq no presentas esta pregunta en los foros??alli yoy mas de alguien gustoso te respondera.

    saludos.

  5. Ismael [#]

    Andrés: en ese caso el problema es el mismo. Una tabla es una etiqueta HTML como cualquier otra.

  6. Hector Fdez [#]

    Buenas, esta practica es algo habitual en mis diseños pero, ahora me encuentro con el problema de la visualizacion en Firefox, dado que la capa que situamos a la derecha ( float:right) en Firefox no realiza dicho estilo, saben de algún hack para corregirlo??
    Un saludo.

  7. CSSLab Admin [#]

    mmm a mi si se me visualiza en safaru y en FF…… estas seguro q lo estas haciendo bien? chequea los anchos, puede q por ahi no este cuadrando.

    suerte, saludos.

  8. CSSLab - Nuestro verdadero cliente [#]

    […] utilizar alguna ventana modal, o validación de formularios con :focus, menú con tabs, 2 ó 3 columnas, etc. Todo eso influye en cómo se ordenará y finalmente entregará la […]

  9. Blog de Cristiam Herrera Daza » Blog Archive » Nuestro verdadero cliente [#]

    […] la pena utilizar alguna ventana modal, o validación de formularios con :focus, menú con tabs, 2 ó 3 columnas, etc. Todo eso influye en cómo se ordenará y finalmente entregará la información a quien la […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab