Las Columnas Falsas
El primer y más conocido método es el de las columnas falsas (o "faux columns"). Este método es sencillo: consiste en crear columnas falsas mediante imagenes.
Como les había explicado hace unas cuantas líneas, los elementos de bloque no se expanden más de lo que necesitan para abarcar sus contenidos; pero queremos que nuestras tres columnas se expandan lo mismo ¿cierto? Bueno, ¿Qué te parece si creamos un elemento que contenga a nuestras tres columnas y le damos una imagen de fondo? El elemento que contiene a nuestras tres columnas se expande hasta abarcar todos sus contenidos... algo como esto:
En el ejemplo, la columna azul es la más alta, por lo que el div contenedor se expande hasta donde termina la azul. Sólo nos queda agregar una imagen de fondo con los anchos indicados y esta técnica surte efecto. Pero vamos a un ejemplo más práctico.
El HTML
Vamos a hacerlo rápido y simple: Necesitamos 4 divs: un contenedor, el div izquierdo, el derecho y el central. El código que debemos tener dentro de nuestro <body> es algo como esto:
El CSS
Primero vamos a lo básico. Queremos posicionar nuestras columnas una al lado de otra, por lo que debemos flotarlas. Como no queremos pegarlas una a la otra, vamos a darle un margen derecho de 10px a cada una, para que estén separadas. Por último, pero sin duda no menos importante, vamos a "limpiar" el contenedor. Esto es, a hacer que cubra todos los elementos (al contener elementos con float, el contenedor no se expande para cubrirlos, y esto es justamente lo contrario a lo que queremos lograr). Al final queda algo como esto:
- #contenedor {
- width: 770px; /* Es necesario poner un ancho o alto para que IE "limpie" el elemento automaticamente */
- margin: 0 auto;
- margin-top: 20px
- }
- /* Limpiamos el contenedor para los navegadores que si funcionan como deben */
- #contenedor:after {
- content: ".";
- display: block;
- height: 0;
- clear: both;
- visibility: hidden
- }
- #izquierda, #central, #derecha {
- float: left;
- margin-right: 10px
- }
- #izquierda {
- width: 200px;
- background: #C1D091
- }
- #central {
- width: 400px;
- background: #90D1BF
- }
- #derecha {
- width: 150px;
- background: #D3908E;
- margin-right: 0 /* eliminamos el margin que agregamos arriba para que no descuadre */
- }
Con eso ya tenemos nuestras columnas alineadas unas al lado de la otra. Les dejo un ejemplo de cómo se ve nuestro layout hasta aquí. este será el archivo que usaremos en todos los ejemplos a partir de ahora.
Ahora vamos a arreglar el problema de que no se expanden equitativamente. Para arreglarlo, vamos a crear una imagen con los colores y tamaños de nuestras columnas. Es decir, una imagen de 770px con una caja verde de 200px a la izquierda. 210px mas (el ancho de la pirmer columna y el margen derecho de la misma) vamos a crear una caja de 400px azul y 620px mas a la derecha una de 150px de color rojo. Todo esto en un bonito gif de 1px de ancho. Ahora solo nos queda aplicarlo a nuestro div contenedor como fondo.
- #contenedor {
- width: 770px; /* Es necesario poner un ancho o alto para que IE "limpie" el elemento automaticamente */
- margin: 0 auto;
- background: url('faux-bg.gif') repeat-y; /* Método de columnas falsas */
- margin-top: 20px
- }
Aquí tienen el ejemplo de cómo queda con el método de las columnas falsas.
Las desventajas
Claro está este método no es infalible. Aquí algunas desventajas:
- Requiere de un div extra.
- Requiere de una imagen extra.
- Requiere de la creación de la imagen extra.
- No funciona si alguna de nuestras columnas es líquida.
- Si el usuario tiene las imagenes deshabilitadas, el efecto se pierde (aún cuando solo queremos un color y no una sombra o una textura en nuetra columna)
Y bien, si este método no te convenció, ¡Sigue leyendo que te tengo otros dos!
Vaya! No conocía la última técnica y es simplemente excelente! Aunque me duela admitirlo hasta ahora solía tirar de la opción de la imágen de fondo... Gracias por compartirla!
Yo no conocía ninguna de las tres!
Muy buen tutorial, gracias
Genial enserio, es excelente poder ver el diseño de esa manera!
De peeelos!!!
Simplemente me quedo con la ultima xP
Gracias!!!!
Saludos y lo pondre a preubas sin dudas!
Saludos:
Acabo de probar (sobre windows XP SP2) el excelente tutorial que has escrito y estos son mis resultados:
Methodo 2
IE 6.0 SP2 : OK (las 3 columnas crecen hasta la barra de estado).
Safari 3.0.3 : KO (No se ve la imagen de fondo).
Firefox 2.0.0.6: OK
Methodo 2
IE 6.0 SP2 : la columna central es mas larga.
Safari 3.0.3 : OK.
Firefox 2.0.0.6: OK
Methodo 3
IE 6.0 SP2 : no logro ver ninguna columna.
Safari 3.0.3 : OK.
Firefox 2.0.0.6: OK
_argos: Me parece interesante que el último método no te haya funcionado en IE6, ya que a mi me funciona perfectamente. Una pregunta ¿Qué valor usaste para el margin y padding? ¿32768px? Si es así, ¿podrías subir tu código a algún lugar para revisarlo? De antemano, gracias.
Chicoblog: Yo también, es la más práctica que hay, sin embargo he visto un error ( mio, quizá ) extraño, cuando un anchor direcciona a un elemento del sitio ( #elemento ), el scroll empieza desde ahí y no se ve lo anterior. Metal.orgy si puedes hacer algo para ayudarme sería genial.
Hola,
a mi tampoco me aparece nada con la última opción en un IE6.0 sp2
qué lástima!
david: He subido una versión revisada del ejemplo de la última técnica que utiliza 32768px en lugar de 9999em. Visítala y dime si te va bien, que ya la he revisado en una computadora con IE6 por defecto y funciona perfectamente bien. Si sigue sin funcionar (Que no creo), tendré que actualizar y poner métodos alternativos para IE6.
xmas: No he entendido bien, pero creo que sé por qué es y, en dado caso, no es un error, sino el comportamiento normal de los elementos y muy probablemente una desventaja. Igual te pido un favor: sube un html simple donde se vea bien el error y veré que puedo hacer.
MeTaL_oRgY : Estaba por enviarte el codigo, pero probe con la version modficada y mi IE 6.0 SP2 funciona correctamente, salvo que las columnas llegan hasta el borde de la barra de estado, gracias por leer mi mensaje y brindar una pronta solucion.
_argos: Entonces el error si era el valor que había usado originalmente. experimento curioso: ve aumentando de a poco el valor de los pixeles en el segundo ejemplo y mira como va desapareciendo de a poco el contenido. IE se comporta de maneras extrañas... jajaja
¡Saludos!
xmas Hmm.... no había pensado en eso, y después de algo de investigación he descubierto que, si vas a usar anchors en la misma página dentro de las columnas, esta técnica no es la opción. Ahora actualizo el post.
WUAU! loco sos una maquina!
increible... me encanta esta pagina, justo cuando me topo con un problema diseñando, vengo aca y YA ESTA LA SOLUCION!!... grandioso trabajo amigo.
Gracias!!!
Wuau! de nuevo... muchisimas gracias metalize me dejaste asombrado xD
No sabes cuantos dolores de cabeza tuve para solucionar esto...gracias a ti..se han ido..
Saludos!
¡Felicidades! y ¡Gracias!
El problema que yo tengo, no se soluciona con estos ejemplos (tengo un diseño muy complicado, con muchos elementos) pero la lección de soluciones imaginativas es excelente.
Sin duda alguna une excelente tutorial para solucionar el problema con las divs en un contenido largo para alguna de ellas. Me habían preguntado de estos errores pero ahora creo que ya tengo la solución. Buen aporte! =)
hola
te escribo esto para decirte que en los feeds solo aparece la primera pagina del posteo. o sea, de ultima no es guaa un re impedimento, pero que se yo.
buen tutorial, saludos.
He probado el tercer método y funciona muy bien, excepto por un problema: si se le aplica un background a las columnas y nuestra maquetación posee un footer, este aparece tapado por las columnas, ¿alguna idea para solucionar esto?
Otro detalle: en el último código CSS que muestras aparece 32768pxem cuando debe ser 32768px [tienes que sacar los "em"]
Sergio: ¡Saludos! Gracias por avisarme del error en el post, ahora mismo lo arreglo.
En cuanto a tu problema, intenta aplicar position: relative al footer además de un z-index: 9999. Con eso debería de verse. 
¡Saludos!
Recuerdo haber visto la ultima tecnica antes... creo que en "The search for the perfect layout"?
Muy buenas explicaciones, felicitaciones.
Estas loco Rammy
[...] http://metalize.liveonstyle.com/2007/08/13/columnas-100-altas/ [...]
[...] En Metalize nos traen un excelente tip de diseño para quienes usamos CSS y en más de una ocasión nos hemos encontrado con la situación de que al usar columnas en nuestro layout estas no crecen al 100%. [...]
Excelente articulo.
Consulta en caso de agregar una img de fondo en
#contenedor {
width: 748px;
margin: 0 auto;
overflow: hidden;
background: white url(../images/fondo-bottom.gif) bottom left repeat-x ;
}
En IE7 - 6 no la veo en FF si, como puedo resolverlo, mgcias de ante mano
holaaaaaaa
ME ENCANTA EL CUARTETOOOOOOOOOOOOO
A MUERTE!!!!!!!!
cuarteto_victoria@hotmail.com
Mariana: Es algo difícil diagnosticar algo así. ¿Podrías subir tu código para echarle un ojo y así decirte bien qué es lo que pasa?
¡Saludos!
Lo he logrado Metal.ize!!! jodeer, y creiamos que era tan dificil...
char temp, world[5]="mundo";
int b=4;
for(int a=0; a=4; a++){
temp=world[a];
world[a]=world[b];
world[b]=temp;
b--;
}
veeees, ahora ya no es "mundo", ahora es "odnum", dio un giro de 180 grados...
He cambiado al mundo y ahi esta el codigo fuente !!!!!!!! XD
He descubierto un pequeño pero molestoso problema con la primera solución metal.orgy. Se trata de que hace la página un poco más pesada y sobretodo hace que los efectos AJAX o simplemene javascript se vean lentos, lo digo por experiencia, quité la imagen de fondo y todo era muy rápido. Tengo la teoría que como hay movimiento en la página, CSS trata de mantener el fondo para que no se mueva o algo así a causa de los movimientos que hay, lo que hace que haya un conflicto entre ambos y por eso se pone lento. Es la única explicación que puedo darle.
La ultima solucion no es del todo buena, no ?? ya que al esconder lo que sobra por abajo, se pierden cosas. Por ejemplo, simplemente que añadas bordes a las capas "#izquierda #derecha..." los bordes de abajo no se ven. Como solucionas eso ??
OIGAN! Decubrí la solución perfecta al alcance de todos, duele no haberla encontrado antes, está en Cristalab, miren: http://www.cristalab.com/tips/39039/columnas-variables-de-igual-altura-con-div-y-css
[...] Leyendo el artículo de metal.orgy pude observar 3 excelentes soluciones para lograr que las columnas de un diseño midan igual con respecto al contenido de alguna de ellas; lastimosamente, ninguna de las soluciones que planteó se adecuaron a mi diseño y me parecieron algo complicadas. [...]
[...] Ir al contenido Sin Comentarios, Comentario o Ping [...]
[...] En el blog de MeTaL_oRgY [...]
[...] Varias soluciones a la altura de las columnas [...]
Desde mi ignorancia, porq estoy comenzando a utilizar el CSS. No es posible hacer lo siguiente:
esquematicamente
en donde la tabla tengo un fondo q se corresponda con los colores de los div (o las imagenes), de esta forma si una columna crece (yo porq uso paginas dinamica y nose la altura de la columna) tambien crecera la tabla y por ende se vera la imagen de fonde de la misma.
Otra cosa la tabla va sin bordes ni margenes, y con el width al 100% asi dependera del superior. independizando las caracteristicas del layout de la tabla.
Puede q no este en lo correcto, pero a mi me vino de maravilla. Cualquier duda envienmen un mail q paso el codigo
Saludos
Seba
SanFernando-MalosAires-Argentina
No salio el esquema en el post :p
ahy va:
div>
table>
tr>
td>
div id="left"> /div>
div id="centro"> /div>
div id="rigth"> /div>
/td>
/tr>
/table>
/div>
saque los
Seba: Ouch... vamos seba, que este post trata exactamente de cómo hacer lo que quieres hacer, y sin necesidad de imagenes.
Echale un ojo a la página dos de este tutorial; que hace lo que tu, pero en lugar de usar una tabla (Que es un gran error de semántica) usa un div.
Tienes razon, pero en mi caso: con una web dinamica (.php) en donde la columna de la izquierda crece desmedidamente, no me sirve ningun ejemplo (todos tiene width pre-fijado). O no los supe asimilar bien. Pero me parecia una buena opcion, gracias por la correccion
Seba: Estas tecnicas precisamente tratan sobre contenido dinámico. No sabemos el alto de las columnas en ningún caso (y en algunos de ellos, tampoco el ancho).
En definitiva, yo trataría de eliminar esa tabla por cualquier medio posible.
Ah perfecto, ya creo haber entendido, y la ultima opcion es la q mas me sirve, muchas gracias por aclararme las dudas. Muy bueno el material, envio un cordial saludo !!!
Buenisima la 3ª solción, una pena no haberla conocido antes.
Saludos y gracias!
Excelente las explicacion, mis mayores respetos a ustedes. saludos
vi un tutorial que utilizan javascript, pero estaba en ingles y es muy complicado, conocen un metodo explicado a su estilo?
Tengo unas dudas sobre el método 3!
Que sucede si tengo menos contenido que la altura de la resolución y quiero que el contenedor y los divs interiores se estiren el 100%???
Probé con este método pero no funciona del todo bien, en IE6 no funciona.. y en IE7 y FF el footer se queda arriba y no en el top.
Les dejo la url donde puede verlo:
http://www.grmn.ws/DIVS/lalala.html
http://www.grmn.ws/DIVS/lala.css
Gracias.
Esta tecnica sirve tb para tablas... pero hay una descompensacion cuando tienen un footer que esta tambien dentro del "contenedor". En firefox se ve bien, pero en el explorer se estira todo el diseño
Bravo! este tercer truco me ha resultado muy útil! Gracias por el post, un saludo
Hola!
Antetodo enhorabuena por este tipo de tutoriales que ayudan a seguir investigando y no derrumbarse
Dicho esto, ahí lanzo mi pregunta: ¿Hay alguna manera de combinar la opción 3 con la posibilidad de que el alto inicial (sin ningun contenido) sea el 100%? He probrado de todo ya y no sé qué más puedo hacer. Gracias
WenaS! tremenda ayuda esta jajaja justo lo k buscaba, pero tengo un problemita, utilizando el 3er metodo no me funciona bien en opera, los layers krecen hacia abajo infinitamente casi jajaja, en FF si todo perfect!
Hola, muchísimas gracias por las ideas. He aplicado la última y al principio resultó muy bien y probándolo en IE, también era aceptable. Faltaban los bordes inferiores (lo solucioné a modo de chapucilla, poniendo un borde superior al footer, lo que sirvió para crear un borde inferior ficticio para los 3 cuerpos, main y 2 sidebars, lo comento por si es útil para alguien, aunque sea obvio y chapucerillo). Bueno el misterioso problema surge después: IE directamente NO abre mi página. Eliminé el código (los mágenes y padding y overflow) y se resuelve el problema.
¿Sabes por qué pasa esto y si se puede resolver? me pareció muy misterioso. No es cosa de mi navegador, me lo advirtieron varios usuarios de IE.
En fin, me encantó, pero claro, tenía que venir el Maligno con sus cosas...
Gracias Metal, enhorabuena por el diseño, me ha dejado patidifusa
Dejo aquí feliz constancia de que tras varios ajustes en mi plantilla, todo funciona con hermosura.
Muchísimas gracias por tu ayuda y por la idea ;D
Muy bueno! Gracias
Sos mi ídolo! Gracias por ahorrarme horas de trabajo y tedioso javascript =D
La última es sin duda la mejor opción.
Gracias!!
Estuve probando la tecnica 3 con IE 7 y con firefox 3 y no me funciona con ninguno de los 2, con IE7 hace como si no pusiera el "overflow: hidden" y con firefox no hace nada, estare haciendo algo mal
ya solucione el problema anterior poniendo en el estilo del div contenedor width: 100%;height: 100%
:)
Hola, estoy probando el tutorial, y con la 3 técnica tengo un problema.
Los tamaños de las columnas funcionan perfectamente en ie7 i ff3.
Pero cualquier div u spam que le ingreso dentro de la columna, no me toma ninguna propiedad css definida en mi hoja de estilo.
Que puede ser?
slds, marcelo.
Solo tengo algo que decir:
"Es tan sencillo que duele no haberlo encontrado antes."
Muchas gracias MeTaL_oRgY esto es lo que me hacía falta, lástima que donde lo necesitaba uso anchors
Dejando de lado los casos de los anchors, decidí hacerlo para "prácticarlo" y entenderlo; y según pude ver para que funcione todas las columnas deben tener anchos fijos, ni siquiera se puede dejar a una columna con ancho variable (que tome el ancho restante del div contenedor - los otros anchos)
Si es posible reparar esto de alguna forma que no he visto, me alegraría que posteen la respuesta, sino, entonces sería otra desventaja