Segunda entrega causa directa del [videocast 1][1]. Esta vez, una muy pero muy buena y útil técnica para lograr altos de columnas de 100% respecto del contenedor. Con esto, se puede lograr que el fondo de una o ambas columnas crezcan de acuerdo a la mayor. Este problema de diseño tenía variadas soluciones anteriormente: que el contenedor tuviera el fondo a modo de una imagen, o a través de Javascript también se podían lograr altos de 100%.

![Ejemplo columnas 100% alto][2]

Bueno, espero ahora sepan de qué escribo. Esta vez nuevamente es una elegante técnica que involucra overflow del contenedor y padding y margin negativo en las columnas. Me gustaría hacer una pausa en estas dos importantes propiedades, sólo para dejar claro lo que involucra.

  • Padding: margen interior.
  • Margin: margen exterior.

Para más claridad aún, nuevamente una imagen de ejemplo.

![Ejemplo columnas 100% alto][3]

Safari Firefox Internet Explorer 6 Internet Explorer 7 Opera

Como pueden leer en el muy muy útil artículo [sobre el modelo de caja][4] (si no lo han leído, háganlo ya que es muy muy útil), el padding sí modifica el ancho de nuestra caja, no así el margin. Otro detalle my importante, y que ahora nos concierne, es que el margin acepta números negativos (y que suele tener problemas de interpretación en IE6, principalmente cuando son links los involucrados), no así padding que sólo permite cantidades positivas.

Bueno, al grano. Primero, a las columnas (2 o más) deben decirles que tengan un padding-bottom de 30.000 (bien exagerado, aunque el máximo que se permite es de 32768px pero con 30000 basta). Con eso, nuestro scroll vertical se va a marear de tan grande que va a quedar. Este padding-bottom empujará nuestras columnas (y sus estilos de fondo, color o imagen) hasta no más poder, pero luego les damos un margin-bottom negativo con la misma cantidad. Con esto, nuestra caja vuelve donde estaba al comienzo, pero nuestros fondos siguen con el scroll vertical eterno. Finalmente, la caja contenedora debe esconder todo el exceso y por ende ese scroll, por lo que le damos un overflow: hidden y ya (o sea, todo lo que sobre, escóndelo). Bastante lógico.

div#container {<br />
     overflow: hidden;<br />
}<br />
div#izq, div#der {<br />
     float: left;<br />
     padding-bottom: 30000px;<br />
     margin-bottom: -30000px; <br />
}

Un cuidado que deben tener es que si están flotando las cajas, su contenedor colapsará. Para esto, [.clearfix][5] será la solución ideal.

[Ver ejemplo final][6]{.verejemplo}

[1]: http://www.csslab.cl/2007/10/03/videocast-1-layout-compuesto/ “Enlace al artículo en CSSLab “Videocast 1: layout compuesto”” [2]: http://www.csslab.cl/wp-content/uploads/2007/10/ejemplo_100.gif [3]: http://www.csslab.cl/wp-content/uploads/2007/10/ejemplo_cajas.gif [4]: http://www.csslab.cl/2006/12/14/como-caja-el-modelo/ “Enlace al artículo en CSSLab “como caja: el modelo”” [5]: http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/ “Enlace al artículo en CSSLab “Flotando en la incertidumbre”” [6]: http://www.csslab.cl/ejemplos/altos_100.html “Enlace para ver el ejemplo final”