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:

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

Demo:

Este es el contenedor

Col 1
Col 1
Col 1

Col 2

Pie

3796 lecturas

te recomiendo que al DIV

te recomiendo que al DIV contenedor le pongas un nombre de clase: ejemplo "tr"
tu css:
.tr { display: inline-block; }
.tr:after, .container:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .tr { height: 1% }
.tr { display: block }

Y listo; arreglado. Lo malo de usar "clear:both" es que te deja un espacio por debajo.
más info: http://code.google.com/p/fcss/source/browse/trunk/?r=2

Enviado por acido69 (no verificado) el Lun, 28/07/2008 - 18:37.

responder

Muchas gracias! Me queda la

Muchas gracias!
Me queda la duda: ¿Por qué poner una nueva definición de .tr tras la inicial?

Enviado por clbustos el Lun, 28/07/2008 - 18:52.

responder

Hola, Está muy bien pero

Hola,

Está muy bien pero si la columna de la derecha, por ejemplo, crece más que la de la izquierda, queda un feo hueco debajo de la columna de la izquierda, ¿sabrías como hacer para que las dos columnas sean igual de altas?

Saludos.

Enviado por Perejilillo desconocido (no verificado) el Mar, 29/07/2008 - 01:50.

responder

después de la primera;

después de la primera; viene las sentencias para los render de Geko(firefox, ...), porque son lo únicos que implementan ":after"
la siguiente y última son para el amigo IE; que yo la verdad no sé muy bien porque funciona con eso; porque si le cambias el orden deja de funcionar.
cosas de la programación esotérica para IE

Enviado por acido69 (no verificado) el Mar, 29/07/2008 - 05:36.

responder

Lo siento pero en la última

Lo siento pero en la última version de firefox no funciona :(

Enviado por ManuelEstevez (no verificado) el Vie, 17/04/2009 - 14:39.

responder

¿En cuál, especificamente?

¿En cuál, especificamente? Yo estoy en la 3.0.8 y lo veo bien.

Enviado por clbustos el Vie, 17/04/2009 - 16:54.

responder

La pregunta del millon, como

La pregunta del millon, como hacer para que el alto de Col1 y Col2 sea igual pero sin definir una alto fijo, o sea, si crece una por tener mayor contenido, crezca la otra.

Enviado por Perejilillo desconocido (no verificado) el Vie, 19/02/2010 - 08:13.

responder

Gracias por el truco, me

Gracias por el truco, me funciona perfecto en Mozilla, IE y Chrome (¿nadie usa Chrome?).
Para eliminar el espacio en blanco que queda abajo, disminuí a 0 pt el tamaño de letra del div vacío con que se cierra el contenedor.
Quedó entonces así:

Enviado por Feo (no verificado) el Mar, 09/03/2010 - 21:33.