Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Div padre no toma altura de los divs hijos

Estas en el tema de Div padre no toma altura de los divs hijos en el foro de CSS en Foros del Web. Buenas, tengo un problema entre div padres e hijos. Tengo un div principal dentro de este tengo 2 divs hijos con float:left En el primer ...
  #1 (permalink)  
Antiguo 08/10/2014, 21:09
Avatar de chucky2083  
Fecha de Ingreso: octubre-2014
Ubicación: Buenos Aires
Mensajes: 9
Antigüedad: 8 años, 1 mes
Puntos: 0
Desacuerdo Div padre no toma altura de los divs hijos

Buenas, tengo un problema entre div padres e hijos.

Tengo un div principal dentro de este tengo 2 divs hijos con float:left

En el primer div hijo tengo una imagen, y el segundo div hijo tengo texto

Bien el problema que tengo es que el div principal osea el padre no crece automaticamente, por mas contenido que tenga cualquiera de los divs hijos la altura del div padre no crece.

Lo que quiero es que la imagen del primer hijo, al hacer un transform:scale(Para aumentar la imagen al hacer hover) me corra el 2° hijo para la derecha para que no tape los titulos y el div padre con los hijos tambien se agranden en y.

Probe de todo overflow: auto (me pone un scroll y no lo quiero, quiero que se ajusten los divs), el overflow hide no me sirve porque se oculta parte de la imagen y el overflow visible me lo saca fuera del div padre.

Adjunto Imagen para que se entienda



Aca se ve mejor la imagen ---->> http://i.imgur.com/Kt3rx0X.png

Codigo

Código HTML:
Ver original
  1. <div id="padre" style="overflow:auto;">
  2.     <div id="hijo1" style="float:left;"> <img src="xxx"> {MI IMAGEN}</img> </div>  
  3.     <div id="hijo2" style="float:left;"> INFORMACION </div>
  4. </div>

Saludos

Última edición por chucky2083; 08/10/2014 a las 21:21
  #2 (permalink)  
Antiguo 08/10/2014, 21:44
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 20 años, 9 meses
Puntos: 998
Respuesta: Div padre no toma altura de los divs hijos

no uses scale, modificá directamente el width del img durante el hover y dale a la img display:inline para que al modificar su tamaño se modifique el tamaño de su elemento padre. Algo así:
Código CSS:
Ver original
  1. #hijo1{float:left}
  2. #hijo1 img{display:inline}
  3. #hijo1:hover img{width:200px}
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 09/10/2014, 11:21
Avatar de chucky2083  
Fecha de Ingreso: octubre-2014
Ubicación: Buenos Aires
Mensajes: 9
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Div padre no toma altura de los divs hijos

Sigue igual solo que ahora no muestra el scroll. Lo que quiero es que los divs se acomoden solos cuando se agranda la imagen al hacer hover
  #4 (permalink)  
Antiguo 13/10/2014, 16:11
 
Fecha de Ingreso: septiembre-2014
Mensajes: 3
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Div padre no toma altura de los divs hijos

Cuando hagas el hover sobre el div hijo1 que contiene la imagen dale un margin right para que empuje un poco al div hijo2, algo así:

Código HTML:
Ver original
  1. #hijo1:hover {
  2. transform: scale(1.2);
  3. margin-right: 2em;
  4. }

A la imagen dale simplemente un widht del 100% para que ocupe siempre todo el contenido del div hijo1 y ya está.

PD: El efecto es algo tosco pero bueno se le puede dar alguna transicion o algo para que quede mas bonico.... :)

Suerte
  #5 (permalink)  
Antiguo 20/10/2014, 22:52
Avatar de chucky2083  
Fecha de Ingreso: octubre-2014
Ubicación: Buenos Aires
Mensajes: 9
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Div padre no toma altura de los divs hijos

Hola gracias por las respuestas, ya solucione el problema. Despues de un tiempo me di cuenta que tenia definidos tanto el ancho como la altura de la imagen.

Al sacar eso funciono correctamente.

Gracias
Saludos!

Etiquetas: divs, hijos, padres
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 17:13.