6. pasar de PSD a HTML y CSS | crear varias columnas en html y css

En esta ocasión vamos a maquetar varias columnas en una página con HTML y CSS. Además, con la peculiaridad de que cada una tiene un ancho (width) diferente… Ya verás qué fácil 😉

Según nuestro archivo psd y ayudándonos de las guías, las columnas miden lo siguiente en ancho:

• Columna Izquierda: 221px.
• Columna Central: 326px.
• Columna Derecha: 240px.

Un dato importante a saber es que la separación que hay entre la columna izquierda y la central es de 75px. Esto marcaría el margin-right que se lo aplicaremos a la columna de la izquierda.

Con esta información ya tenemos más que suficiente para, por lo menos, maquetar 3 columnas en un ancho total de 930px. ¿Cómo hacerlo? Nuestro código HTML quedaría de la siguiente forma:

<div id="columnas">
    <div id="col_izqda">
    </div>
    <div id="col_centr">
    </div>
    <div id="col_drcha">
    </div>
</div>

La estructura es tan básica como concentrar a las 3 columnas en un solo contenedor, al que llamamos #columnas y dentro del mismo creamos un div para cada una de ellas. Ahora vamos a aplicarle el código CSS.

/* ------------------------------------ */
/*				COLUMNAS				*/
/* ------------------------------------ */
#columnas {
     width:930px;
	 float:left;
	 margin:20px 0;
     padding:0px;
}

#col_izqda {
     width:221px;
	 float:left;
	 margin:0 75px 0 0;
     padding:0px;
	 height:300px;
	 background:#063;
}

#col_centr {
     width:326px;
	 float:left;
	 margin:0;
     padding:0px;
	 height:300px;
	 background:#063;
}

#col_drcha {
     width:240px;
	 float:right;
	 margin:0;
     padding:0px;
	 height:300px;
	 background:#063;
}

Te habrás dado cuenta de que a las 3 columnas le he dado el mismo alto y el mismo background de fondo. Esto es solo un pequeño truquito que utilizo para asegurarme de que a ese div al que le estoy dando un color (background), se corresponde con los estilos que le estoy aplicando. (Si no pusiera un height, al no tener altura el div, y en principio vacío porque no le he metido contenido aún, sencillamente, no tendría fondo, y no podría previsualizarlo antes de seguir).

Es más sencillo de entender si directamente ves cómo queda lo que acabamos de maquetar con la siguiente demo.

¿Te atreves a maquetar el interior de cada columna? Después de lo aprendido, tienes los conocimientos suficientes para hacerlo. Pero si necesitas el código completo, no tienes más que decírmelo y estaré encantada de enviártelo.

¡Muchas suerte! 🙂

1. pasar de PSD a HTML y CSS | definiendo los pasos
2. pasar de PSD a HTML y CSS | recorte y optimización de imágenes para web
3. pasar de PSD a HTML y CSS | maquetando una web desde cero
4. pasar de PSD a HTML y CSS | maquetar un menu
5. pasar de PSD a HTML y CSS | introducir un vídeo de vimeo o youtube
6. pasar de PSD a HTML y CSS | crear varias columnas en html y css
7. pasar de PSD a HTML y CSS | maquetar el pie de página