columnas

La mejor explicación para crear columnas de alto variable con CSS

Enviado por clbustos el Lun, 28/07/2008 - 12:45.
Clasificado en:

Uno de los grandes misterios de la humanidad es como crear una estructura de dos o más columnas de alto variable, usando sólo CSS. En más de una ocasión he tenido que reinventar la rueda, pero gracias a BarelyFitz Design y su artículo Learn CSS Positioning in Ten Steps', ¡he visto la luz!

La idea, muy sencilla, es la siguiente

  • Utilizar un div contenedor con position:relative
  • Cada columna se define con un ancho definido (que puede ser un porcentaje, para que sea fluido) y con float:left
  • Como último elemento dentro del div contenedor, creamos un div con clear:both

Eso sería todo! Veamos como se ve :)

Código fuente:

  1.  <div style='position:relative;width:50%;background:purple;color:white'>
  2.  Este es el contenedor
  3.  <div style='width:20%;float:left;background:#bbb;'>Col 1<br />Col 1<br />Col 1</div>
  4.  <div style='width:20%;float:left;background:#ccc;'>Col 2</div>
  5.  <div style='clear:both;background:#333;color:white'>Pie</div>
  6.  </div>

Demo:

Este es el contenedor
Col 1
Col 1
Col 1
Col 2
Pie
Distribuir contenido
Principal