Foros del Web » Creando para Internet » CSS »

Como hacer que los divs se amolden como tablas

Estas en el tema de Como hacer que los divs se amolden como tablas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/06/2006, 09:01
Avatar de creativa  
Fecha de Ingreso: octubre-2004
Ubicación: Atlántida Uruguay
Mensajes: 105
Antigüedad: 13 años, 1 mes
Puntos: 0
Como hacer que los divs se amolden como tablas

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.
__________________
http://www.creativa.com.uy
Siempre existen nuevos caminos que recorrer, lo importante es tener ganas de caminar.
  #2 (permalink)  
Antiguo 02/06/2006, 03:41
Avatar de axiertxo  
Fecha de Ingreso: octubre-2005
Ubicación: España
Mensajes: 387
Antigüedad: 12 años, 1 mes
Puntos: 0
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
__________________
El mundo exige resultados. No le cuentes a otros tus dolores del parto. Muéstrales al niño.
  #3 (permalink)  
Antiguo 02/06/2006, 07:44
Avatar de creativa  
Fecha de Ingreso: octubre-2004
Ubicación: Atlántida Uruguay
Mensajes: 105
Antigüedad: 13 años, 1 mes
Puntos: 0
Hola Axierto

...y dime como quedaraia la sintaxis exacta dentro del html?
__________________
http://www.creativa.com.uy
Siempre existen nuevos caminos que recorrer, lo importante es tener ganas de caminar.
  #4 (permalink)  
Antiguo 02/06/2006, 07:50
Avatar de axiertxo  
Fecha de Ingreso: octubre-2005
Ubicación: España
Mensajes: 387
Antigüedad: 12 años, 1 mes
Puntos: 0
<script>
funcioncambiartamanio(){

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

</script>

<body onload="funcioncambiartamanio()">


en este caso se le llama al cargar la pagina

a las capas pertinentes se les ha de poner un id que seran nombre_marco_izquierdo y nombre_marco_derecha
__________________
El mundo exige resultados. No le cuentes a otros tus dolores del parto. Muéstrales al niño.
  #5 (permalink)  
Antiguo 02/06/2006, 08:00
Avatar de creativa  
Fecha de Ingreso: octubre-2004
Ubicación: Atlántida Uruguay
Mensajes: 105
Antigüedad: 13 años, 1 mes
Puntos: 0
Gracias igual por la buena onda,

pero no funciona. Seguiremos buscando. Graciassssssss.
__________________
http://www.creativa.com.uy
Siempre existen nuevos caminos que recorrer, lo importante es tener ganas de caminar.
  #6 (permalink)  
Antiguo 02/06/2006, 11:30
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
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
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 02/06/2006 a las 11:39
  #7 (permalink)  
Antiguo 02/06/2006, 11:43
Avatar de creativa  
Fecha de Ingreso: octubre-2004
Ubicación: Atlántida Uruguay
Mensajes: 105
Antigüedad: 13 años, 1 mes
Puntos: 0
Gracias baccxus

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.
__________________
http://www.creativa.com.uy
Siempre existen nuevos caminos que recorrer, lo importante es tener ganas de caminar.
  #8 (permalink)  
Antiguo 02/06/2006, 11:52
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
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
__________________
Al final del día hablar es gratis, codificar no lo es
  #9 (permalink)  
Antiguo 02/06/2006, 12:10
Avatar de creativa  
Fecha de Ingreso: octubre-2004
Ubicación: Atlántida Uruguay
Mensajes: 105
Antigüedad: 13 años, 1 mes
Puntos: 0
De acuerdo Es que esta perfecto lo que tu dices

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?
__________________
http://www.creativa.com.uy
Siempre existen nuevos caminos que recorrer, lo importante es tener ganas de caminar.
  #10 (permalink)  
Antiguo 02/06/2006, 18:02
 
Fecha de Ingreso: abril-2005
Ubicación: Lima-Peru
Mensajes: 313
Antigüedad: 12 años, 7 meses
Puntos: 1
Creo que una alternativa para solucionar esto es faux columns
  #11 (permalink)  
Antiguo 02/06/2006, 19:52
Avatar de creativa  
Fecha de Ingreso: octubre-2004
Ubicación: Atlántida Uruguay
Mensajes: 105
Antigüedad: 13 años, 1 mes
Puntos: 0
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.
__________________
http://www.creativa.com.uy
Siempre existen nuevos caminos que recorrer, lo importante es tener ganas de caminar.
  #12 (permalink)  
Antiguo 03/06/2006, 10:49
 
Fecha de Ingreso: abril-2005
Ubicación: Lima-Peru
Mensajes: 313
Antigüedad: 12 años, 7 meses
Puntos: 1
de nada amiga creativa, me alegra que hayas solucionado tu inconveniente, todo sea por el imperio!!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:26.