columnas del mismo alto

Uno de los problemas típicos con el que nos encontramos a la hora de convertir un PSD en HTML cuyo diseño posee columnas con contenidos variables, es que el alto de las mismas sean iguales independientemente de la cantidad de contenido que posea cada una.

En este artículo te explico como superar este obstáculo.

Cuando hace unos años, los diseños se realizaban con tablas y no Divs, el problema del alto de las columnas estaba automaticamente resuelto ya que con colocarle el valor de alto a una celda, las demas se adaptaban a ese mismo alto quedando iguales.

Esto no ocurre con la utilización de nuestros tan queridos amigos, los elementos DIVs, ya que el alto de los mismos es independiente entre si.

¿Pero que sucede si por ejemplo, tenemos un diseño que contiene 3 columnas y queremos realizar la conversión de ese diseño PSD en HTML y que dichas columnas tengan el mismo alto sin importar cuanto contenidos interno tengan???

Pues hay varias soluciones, desde trucos (hacks o tricks) hasta soluciones manuales.
Te voy a mostrar aquí la solución mas “elegante” y mas usada.

Esta solución consiste en utilizar los divs como si fueran tablas, y esto lo logramos gracias a una propiedad CSS llamada: “display” con su atributo “table” (EJ: display:table)

Para esta solucione debemos utilizar 3 elementos: 1 contenedor principal, 1 contenedor secundario, y dentro de este ultimo, tantos divs como columnas tengamos en el diseño.

Entonces, la estructura nuestro codigo HTML, quedaría de la siguiente forma:

<div id="contenedor">
<div id="fila">
<div id="columna1"></div>
<div id="columna2"></div>
<div id="columna3"></div>
</div>

El nuestro código CSS para esta estructura, sería el siguiente:

#contenedor {
display: table;
}
#fila {
display: table-row;
}
#columna1, #columna2, #columna3 {
display:table-cell;
}

Gracias a estas propiedades CSS logramos que nuestros elementos se comporten como tablas.
El div #contenedor, actúa como contenedor principal en forma de tabla, gracias a la propiedad “display: table”.
El div #fila, gracias a la propiedad “display: table-row”, se comporta como una fila de esa tabla.
Y los divs #columna1, #columna2, #columna3, gracias a la propiedad “display:table-cell”, actúan como celdas de esa tabla permitiéndonos colocar contenidos dentro de una columna, y que las demas adopten el mismo alto.

En el siguiente ejemplo, he agregado un poco de contenido a la estructura y color de fondo a los 3 divs de columnas así se puede ver el resultado.

Por lo que nuestro archivo HTML completo , con el CSS incluído, quedaría de esta forma:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Columnas del mismo alto</title>
<style type="text/css">
#contenedor {
display: table;
}
#fila {
display: table-row;
}
#columna1, #columna2, #columna3 {
display: table-cell;
color: #000;
width: 100px;
font-weight: bold;
}
#columna1 {
background-color: #F00;
}
#columna2 {
background-color: #FF0;
}
#columna3 {
background-color: #00F;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="fila">
<div id="columna1">
<p>Columna 1</p>
<p>Texto de ejemplo.<br />
Texto de ejemplo.</p>
</div>
<div id="columna2">Columna 2</div>
<div id="columna3">Columna 3</div>
</div>
</div>
</body>
</html>

El resultado de este ejemplo puedes verlo en el siguiente enlace:

> Ver HTML con columnas del mismo alto < 

Puedes descargarte este archivo desde el siguiente enlace:

> Descargar HTML con columnas del mismo alto <

 

De esta forma podemos lograr columnas del mismo alto sin necesidad de valores en la propiedad “height”.

Quizás (seguramente) te estarás haciendo la “gran” pregunta:
“¿Esto es compatible con Internet Explorer? ”

Internet Explorer…

Esto es compatible con Internet Explorer 8 o superior, pero lamentablemente (una vez mas) no es compatible con IE7 y versiones anteriores ya que no soportan los valores mas avanzados de la propiedad “display”.

Saludos!
Cristian

curso html y css

Diseñador y Programador Web Full Stack especializado en front-end (HTML5/CSS3/JS) y back-end (PHP, MySQL). Formador y Consultor en Desarrollo Web y Marketing Digital (SEO/SEM) PSD a HTML Paso a Paso

7 thoughts on “Columnas del mismo alto con CSS

  1. Fabio Alejandro Oviedo Celis Reply

    Crhistian,
    De antemano gracias por ese gran aporte, se que me será de mucha utilidad para el desarrollo de los sitios web que en algún momento tenga que desarrollar.
    Me gustaria poder ampliar el tema sobre el uso de los iframes, la verdad hace unos años hice una web con este TAG, pero actualmente no se si estos todavía se usan o existe alguna otra alternativa.
    Gracias nuevamente por tu aporte a nuestro trabajo

  2. Fabio Alejandro Oviedo Celis Reply

    Cristhian, se me olvidaba comentarte algo: En resumidas en el reporte no se menciona cual es el procedimiento real para hacer la conversion del PSD a HTML, me refiero específicamente a los pasos antes de exportar y posterior a estructurar visualmente el PSD como web.
    Gracia y chao chao

  3. Maite Robles Reply

    PA SOS UN GENIO!!
    ME SALVASTE LA CABEZA TODO EL MUNDO TIENE SOLUCIONES COMPLICADISIMAS – ESTO ES RE FACIL

    1. Cristian (PSD a HTML) Post author Reply

      Gracias Maite.
      Lo simple es lo que mejor funciona, siempre.
      Ademas, cuando mas simple, mas rapido es.
      🙂
      Saludos!
      Cristian

  4. iLen Reply

    Wao no lo puedo creer, siempre me he encontrado con este problema y lo resolvia con jQuery… lo que hacia era tomar el alto de la columna principal y se las asignaba en sus otras 2 columnas … esta es un solucion muy buena.. gracias!!

Deja un comentario

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

*