Php y otras yerbas - La mejor explicación para crear columnas de alto variable con CSS - Comentarios

Gracias por el truco, me

Feo — Tue, 09 Mar 2010 17:37:25 -0800

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í:
<div style='clear:both; font-size:0pt'></div>

La pregunta del millon, como

Perejilillo desconocido — Fri, 19 Feb 2010 04:13:06 -0800

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.

¿En cuál, especificamente?

clbustos — Fri, 17 Apr 2009 13:54:56 -0700

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

Lo siento pero en la última

ManuelEstevez — Fri, 17 Apr 2009 11:39:51 -0700

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

después de la primera;

acido69 — Tue, 29 Jul 2008 02:36:59 -0700

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

Hola, Está muy bien pero

Perejilillo desconocido — Mon, 28 Jul 2008 22:50:10 -0700

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.

Muchas gracias! Me queda la

clbustos — Mon, 28 Jul 2008 15:52:12 -0700

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

te recomiendo que al DIV

acido69 — Mon, 28 Jul 2008 15:37:00 -0700

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

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

clbustos — Mon, 28 Jul 2008 09:45:33 -0700

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