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

[chucky2083]

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:

<div id="padre" style="overflow:auto;">
    <div id="hijo1" style="float:left;"> <img src="xxx"> {MI IMAGEN}</img> </div>  
    <div id="hijo2" style="float:left;"> INFORMACION </div>
</div>
 

Saludos

[webosiris]

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:

#hijo1{float:left}
#hijo1 img{display:inline}
#hijo1:hover img{width:200px}
 

[chucky2083]

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

[sergiojmdv]

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:

#hijo1:hover {
transform: scale(1.2);
margin-right: 2em;
}
 

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

[chucky2083]

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!