Como hacer que los divs se amolden como tablas

creativa · #1 (**permalink**) 01/06/2006, 08:01

El unico problema que sigo teniendo hasta ahora con la maquetacion en divs es el siguiente:
Si yo tengo un div #contenedor, que dentro tiene un div #left y otro #right
(como si fuera una tabla de 2 columnas), como hago para que al estirarse el div #left porque le he agregado contenido, el div #right se estire a la misma altura (height) que el otro o viceversa, sin fijarle una medida definida en px a ninguno de ellos.
Ah y que se vea igual en cualquier navegador.
Alguna idea? Gracias desde ya.

axiertxo · #2 (**permalink**) 02/06/2006, 02:41

si quieres puedes usar un poco de javascript

al cargar la página(o al introducir texto) llamas a una funcion que haga lo siguiente:

nombre_marco_izquierdo.style.height=nombre_marco_d erecho.style.height

saludos

creativa · #3 (**permalink**) 02/06/2006, 06:44

...y dime como quedaraia la sintaxis exacta dentro del html?

axiertxo · #4 (**permalink**) 02/06/2006, 06:50

creativa · #5 (**permalink**) 02/06/2006, 07:00

pero no funciona. Seguiremos buscando. Graciassssssss.

baccxus · #6 (**permalink**) 02/06/2006, 10:30

Con CSS se usa un pequño truco:
http://usuarios.lycos.es/baccxus/borrar.htm

Fíjate en el código, lo único que se hace es ponerle un background al contendor (del mismo ancho de una de las divisiones, por lo general la que menos contenido va a tener), así cuado estira cualquiera de las dos columnas, se ve como si se estiraran las dos divisiones.

Código:

#contenedor {
background: #FFFFFF url(fondorojo.gif) left repeat-y;}

Saludos y espero sea lo que buscas

creativa · #7 (**permalink**) 02/06/2006, 10:43

Eso funciona si las dos columnas y el contenedor usan el mismo color o imagen background, el problema surge cuando una columna es de fondo rojo y la otra azul por decirte un ejemplo, pero bueno, de echo encontre una forma de arreglar el codigo css y verlo bien en mozilla y netscape, pero por algun motivo explorer y firefox no me dan bola.
Esa solucion que dices sera la que usare mientras tanto, tratando de que siempre sea la misma columna la que recoja mayor cantidad de lineas de info, asi no se notara el desfasaje.
Esperaremos a que todos los navegadores admitan ccs2, aunque seguro que cuando BillGates lo actualice ya estaremos maquetando en css3, jajaja.

baccxus · #8 (**permalink**) 02/06/2006, 10:52

Claro que funciona para dos colores distintos, solo agrégale color de fondo al contenedor, por ejemplo:

background-color: blue;

y ahora mira el mismo enlace:
http://usuarios.lycos.es/baccxus/borrar.htm

Saludos

creativa · #9 (**permalink**) 02/06/2006, 11:10

pero no permite alternar en que columna puede haber mas cantidad de info, estamos hablando de contenido que se carga dinamico y el cual no manejo yo.

O sea si yo siempre se que la columna azul es la que va a estirar, no hay problema, obvio se define el background rojo al contenerdor y a la columna roja izq y eso siempre queda asi, incluso se le puede dar rojo al contenedor y ponerle background:none; a la columna izq. roja.

Mira que esta entendible tu explicacion, el tema sera dejar una sola columna (en la muestra que pones seria la der azul) a efectos de cargar el grueso del contenido.

Solo me preguntaba que pasaria si la persona que sube la info, un dia se le ocurre solo poner 2 lineas de texto en la colum derecha azul, entonces ahi quedaria descuadrado, o sea, asomaria un rectangulo rojo por debajo del azul.

Me explico?

MaXaC · #10 (**permalink**) 02/06/2006, 17:02

Creo que una alternativa para solucionar esto es faux columns

creativa · #11 (**permalink**) 02/06/2006, 18:52

Gracias MaXac, eso al menos lo soluciona si son colores planos, impecable.
Igual dejo explicado por aca el dato que saque del link que enviaste por si alguien mas lo precisa.
El tema es dar al div#content (que contiene al div#columnleft y al div#columnright) un background image que sea una linea horizontal fina partida en dos colores que se corresponden al widht de cada columna y ademas, darle a ese mismo div#content (claro esta) background repeat: y.
Y solucionado el tema. Al menos para colores planos o backgrounds paterns. Ya si cada columna lleva una imagen entera y no repetida de fondo, el tema se complica.
Pero es una muy buena solucion y el sitio ese esta muy bueno.
Un beso y gracias.

MaXaC · #12 (**permalink**) 03/06/2006, 09:49

de nada amiga creativa, me alegra que hayas solucionado tu inconveniente, todo sea por el imperio!!