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:

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.

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

 

7 Respuestas

    • admin

      Hola Juan,
      El código es el que tienes en la misma página. Tan solo tienes que separar el HTML por un lado y CSS por otro.
      Saludos y gracias por comentar 🙂

      Responder
  1. Jauckor

    Hola, pues he estado revisando el artículo pero no encontré solución a esta llana pregunta: ¿Cómo exportar a html una diagramación para mailing hecha en PSD y/o AI? Muchas gracias, reina.

    Responder
    • goana

      Hola! Si me das un ejemplo más concreto de lo que quieres quizá pueda ayudarte 🙂 No tengo muy claro a qué te refieres… :S Lo siento!

      Responder
  2. Angie

    Hola! Me has ayudado mucho a empezar a entender como funciona el mundo html i css.
    Yo lo necesito para hacer mailings/newsletters para enviar por mail. Ahora lo estoy subiendo al servidor para enviarlos de la siguente forma:

    Sin título-1

    En el navegador por tanto se visualiza como una sola imagen todo el contenido, y no tengo opción de poner enlaces por ejemplo.
    Ahora estoy probando con photoshop cc y sus herramientas para copiar el código css, pero una vez paso a programar no se como llamar a las imágenes que he guardado por sectores previamente.
    Si me puedes ayudar perfecto, de todas formas muchas gracias por tu pagina, muy buena! 😉

    Saludos

    Responder

Hacer Comentario

Su dirección de correo electrónico no será publicada.