Foros del Web » Creando para Internet » CSS »

Como lograr que dos div con informacion tengan la misma altura

Estas en el tema de Como lograr que dos div con informacion tengan la misma altura en el foro de CSS en Foros del Web. Hola junto como dice el titulo como lograr que dos o mas div con informacion maqueteados en css tengan la misma altura. Por ejemplo tengo ...
  #1 (permalink)  
Antiguo 29/12/2008, 15:50
Avatar de salvador86  
Fecha de Ingreso: enero-2008
Ubicación: Guadalajara- Mexico
Mensajes: 467
Antigüedad: 9 años, 11 meses
Puntos: 2
Como lograr que dos div con informacion tengan la misma altura

Hola junto como dice el titulo como lograr que dos o mas div con informacion maqueteados en css tengan la misma altura. Por ejemplo tengo 3 columnas, en la primera según su informacion su altura es 100px, la siguiente 50px y la tercera 300px, pero yo deseo que las tres columnas tengan la misma altura (que tomen la altura del mas alto), es decir cual fuese la posición de la columna mas alta todos temen ese valor.

Tal vez digan por que necesito eso, pues es por diseño en este enlace http://www.peru4x4.com/home.htm veran una pagina con 3 columnas y las dos ultimas tienen el mismo tamaño (claro facil con tablas) pero con css se adapta según el contenido.

Espero me haya dejado entender sino, les pido que me lo hagan saber, gracias de ante mano
  #2 (permalink)  
Antiguo 29/12/2008, 15:57
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Como lograr que dos div con informacion tengan la misma altura

Lo que necesitas es esto:
http://www.araudi.net/multicolumna/multicolumna1.html

Aresillo!!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #3 (permalink)  
Antiguo 29/12/2008, 16:23
Avatar de salvador86  
Fecha de Ingreso: enero-2008
Ubicación: Guadalajara- Mexico
Mensajes: 467
Antigüedad: 9 años, 11 meses
Puntos: 2
Respuesta: Como lograr que dos div con informacion tengan la misma altura

Ok voy a chequear este link por se acaso pongo como se ve con mi código
  #4 (permalink)  
Antiguo 10/01/2009, 08:43
Avatar de salvador86  
Fecha de Ingreso: enero-2008
Ubicación: Guadalajara- Mexico
Mensajes: 467
Antigüedad: 9 años, 11 meses
Puntos: 2
Respuesta: Como lograr que dos div con informacion tengan la misma altura

Hola me parece correcto, pero como se coloca en el css un minimo digamos de 1000px y la información mide 500px siempre se muestra el minimo, aqui lo aplique http://www.peru4x4.com/NPeru4x4/home.htm y claro en otra pagina lo puedo usar la misma clase sino otra con otro minimo en el css. alguna sugerencia o modificación de código
  #5 (permalink)  
Antiguo 10/01/2009, 09:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como lograr que dos div con informacion tengan la misma altura

Creo que posilemente el enlace que quería poner Aresillo era este:

http://www.araudi.net/ejemplos/colum...ilibradas.html
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 12/01/2009, 09:59
Avatar de helthon  
Fecha de Ingreso: junio-2005
Ubicación: Lima
Mensajes: 549
Antigüedad: 12 años, 6 meses
Puntos: 7
Respuesta: Como lograr que dos div con informacion tengan la misma altura

Cita:
Iniciado por Aresillo Ver Mensaje
Lo que necesitas es esto:
http://www.araudi.net/multicolumna/multicolumna1.html

Aresillo!!
Te refieres a esto:

Cita:
#cont_lat_izq { width: 100px;
float: left;
position: relative;
height: auto;
min-height: 500px;
margin-left: -100px;
}
#cont_lat_der { width: 100px;
float: right;
position: relative;
min-height: 500px;
height: auto;
margin-right: -100px;
}

<div id="cont_lat_der">La barra lateral derecha</div>
<div id="cont_lat_izq">La barra lateral izquierda</div>
Pero no se agranda

Ahora navegando encontre esto http://foros.cristalab.com/height-au...e-auto-t24776/

informan que si se puede arreglar pero hasta ahora en mi plantilla de prueba no se puede.
__________________
HELTHON FUENTES
FLORERIA FLORES PERU Floresperu.com.pe
Garantizamos que cada entrega de flores será de la más alta calidad y frescura

Última edición por helthon; 12/01/2009 a las 10:22
  #7 (permalink)  
Antiguo 12/01/2009, 10:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como lograr que dos div con informacion tengan la misma altura

¿Has leído mi mensaje?
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 12/01/2009, 12:10
Avatar de ToLeR  
Fecha de Ingreso: noviembre-2008
Ubicación: Laboratorio La Ratonera
Mensajes: 48
Antigüedad: 9 años
Puntos: 1
Respuesta: Como lograr que dos div con informacion tengan la misma altura

He estado siguiendo el tema y estoy en la misma situación que Salvador 86, la idea es exactamente la que comentas Mikmoro. Como consigues que las dos capas tenga el mismo tamaño a razon del contenido y no por asignarle el mismo "eight"???????????

Gracias a todos.
  #9 (permalink)  
Antiguo 12/01/2009, 12:28
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Como lograr que dos div con informacion tengan la misma altura

Fíjate en las cuatro cajas que utiliza, su posición, los colores del fondo (qué caja usa qué color), los margin y también el orden de aparición en el html.

Verás que ni ".columna_derecha" ni ".columna_izquierda" tienen color de fondo. Y en ellas está colocado el texto.
Las que tienen fondo y hacen que aparentemente crezcan las dos anteriores a la par son:
"#caja_izq" que contiene a "#caja_der" ( y ésta última a las dos anteriores).

Si cualquiera de las dos ".columna_*" crece, hará crecer a su contenedora (caja_der) y su color de fondo y esta a su vez a "caja_izq" y su fondo y ¡eureka!

No sé si me habré sabido explicar
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 12/01/2009, 12:39
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años
Puntos: 4
Respuesta: Como lograr que dos div con informacion tengan la misma altura

http://matthewjamestaylor.com/blog/e...r-css-no-hacks

Una solución perfecta y bien explicada (en ingles).
  #11 (permalink)  
Antiguo 12/01/2009, 13:13
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como lograr que dos div con informacion tengan la misma altura

La explicaciópn bien detallada de cómo hacerlo está en este mensaje, mejor aun, en el zip que enlaza, que contiene un doc con la explicación:
http://www.forosdelweb.com/f53/faqs-...ml#post2593702
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 13/01/2009, 16:14
Avatar de salvador86  
Fecha de Ingreso: enero-2008
Ubicación: Guadalajara- Mexico
Mensajes: 467
Antigüedad: 9 años, 11 meses
Puntos: 2
Respuesta: Como lograr que dos div con informacion tengan la misma altura

Gracias Mikmoro, estuve aplicandondo tu ejemplo y no tiene problema, bajare la explicación. Gracias
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 08:32.