Div padre no toma altura de los divs hijos

[hanscruz]

Bueno me tope con un problema familiar entre padres he hijos jaja en fin el problema es este:

Tengo un div principal dentro de este tengo 2 divs uno con float:left y el otro con float :right hasta ahi todo bien.

Bien el problema que tengo es que el div principal osea el padre tiene un fondo y un borde para el diseño, pero por mas contenido que tenga cualqueira de los divs hijos la altura del div padre siempre es 0 osea como si no tubiera nada.

Bien hasta donde averigue se debe a los float que tienen los divs hijos, pero supongo que debe haber otra solucion ya que esto solo no funciona en firefox y en internet explorer funciona perfectamente.

saludos.

[Calizman]

Mmm... Saludos hanscruz!!

Lamentablemente no puedo ayudarte porque no te entiendo!! no se que es lo que quieres hacer y lo que no sale tal como es...

Seria bueno que pusieras un ejemplo de que es lo que quieres, y como lo tienes! eso ayudaria mucho!!

[Dalvenjha]

Simple, dale a tu div padre lo siguiente para firefox:

Código:

min-height:50px;
overflow:hidden;
y si quieres dejar un espacio entre el fondo de los que tienen float, entonces:
paddig-bottom:20px;

Y listo, con eso te ahorras el sufrimiento, pero eso es solo para firefox, opera chrome y etc, para el ie, puedes poner un comentario condicional que diga:

Código:

*html #tudiv {
height: 50px;
overflow:visible;
padding-bottom:20px;
}

[conmenta1965]

Hola. Yo creo que el problema que tienes es debido al Valor que le has dado a la propiedad "height" en el <div> contenedor principal. Pero para saberlo, habría que ver el CSS, además de saber si el Fondo es imagen o no.

Si quieres más información teórico Y/o práctica, ponte en contacto.

Saludos.

[Mikmoro]

Esto se ha repetido muchas veces: la caja contenedora no crece porque si las cajas que contiene están flotadas no le hacen crecer, excepto para IE, que sí lo hacen.

Prueba a añadir a tu caja contenedora simplemente overflow: auto en la CSS. Si no funciona, se deberá a que tienes establecida una altura en esa caja. Si es así, vuelve a preguntar y aplicamos la segunda solución que es infalible.

[hanscruz]

Gracias por sus repuestas, mikmoro me entendiste perfectamente y ya probe con overflow: auto pero nada. Hasta donde yo se creo que no se puede hacer crecer el contenido del div padre ya que los divs hijos tienen un float pero me interesaria saber tu segunda opcion que lo llamas infalible, en verdad me tienes intrigado y quisiera saber como se puede lograr.

Gracias y espero tu respuesta.

[Dalvenjha]

Pueds poner tu CSS para verlo? tu estructura de archivos tb please.

[Mikmoro]

Iniciado por hanscruz

Gracias por sus repuestas, mikmoro me entendiste perfectamente y ya probe con overflow: auto pero nada. Hasta donde yo se creo que no se puede hacer crecer el contenido del div padre ya que los divs hijos tienen un float pero me interesaria saber tu segunda opcion que lo llamas infalible, en verdad me tienes intrigado y quisiera saber como se puede lograr.

Gracias y espero tu respuesta.

Si quieres que ese div principal crezca cuando crezca su contenido aunque éste esté floatado, debes producir un corte en el flujo del documento, colocando dentro de ese div y justo antes de cerrarlo con </div> una caja vacía de esta manera:

<div class="corte"></div>

y ahora añadir a la CSS este selector:

.corte {clear: both;}

Recuerda que la caja del corte debe estar dentro del div principal, justo ante de cerrarlo.

P.D.: me gustaría ver por qué el overflow no ha funcionado, ya que lo condicionaba al tamaño y no lo mencionas.

[hanscruz]

Gracias por tu respuesta lo probare y te cuento si me funciono.