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 1
Col 1
Col 2
Pie
- 777 lecturas
Buscar
Publicidad
Inicio de sesión
Comentarios recientes
- Hi!
I want to improve my SQL
hace 4 horas 36 mins - Yo estoy en busca de un
hace 13 horas 22 mins - Gracias. Me gustaría que me
hace 6 días 13 horas - Está muy weno el post, me
hace 6 días 15 horas - Gracias por el ofrecimiento,
hace 1 semana 1 día - Hey hola no soy de chile soy
hace 1 semana 2 días - disculpa que haga dos
hace 1 semana 3 días - Con Ices2 solo puedes usar
hace 1 semana 3 días - una pregunta prodria ser una
hace 1 semana 3 días - Me gustaría saber su
hace 2 semanas 1 día
Referencias
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
Muchas gracias!
Me queda la duda: ¿Por qué poner una nueva definición de .tr tras la inicial?
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.
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
Enviar un comentario nuevo