problema con float left, desborde

[minkweb]

Hola maestros, tengo un problema con css.

Resulta que quiero hacer 2 divs que esten dentro de otro div, los 2 anidados que tengan float:left para q queden uno junto al otro, todo bien hasta este punto.

El detalle es que a los 2 hijos les tengo q colocar float:left, pero al hacer esto los 2 hijos se desbordan del padre, esto me obliga a tener q darle una altura definida al padre que sea mayor que la de los hijos, pero esto me amarra mucho el diseño porque si la altura de los hijos es mayor que la de padre los hijos se me desbordaran.
¿Como se arregla este inconveniente?

Saludos

[Triby]

Despues de los dos hijos coloca un div que "cancele" el comportamiento del float:

Código css:

div.limpia {
    clear:left;
}
 

Código html:

<div id="padre">
    <div class="hijo"></div>
    <div class="hijo"></div>
    <div class="limpia"></div>
</div>
 

Puedes aplicar mas propiedades a div.limpia, dependiendo de lo que necesites como alto, ancho, etc.

[minkweb]

Muchas gracias estare probando el codigo =D

[safe]

Otra opcion, si no quieres agregar un elemento vacio, es flotar el elemento padre. De esta manera se estirara correctamente (para que queda igual que ahora puedes llegar a tener que tambien asignarle un width).

[Dalvenjha]

Otra opción sin poner un div de quiebre podría ser que hagas lo siguiente:

Código CSS:

#padre{
min-height:800px; <--------- un numero cualquiera.
overflow:hidden;
}
 

Esto obliga a los divs padres a que se estiren con los hijos, si quisieras que haya algún espacio antes de que termine el padre, solo le das un "padding-bottom" y ya.

Claro, esto es para navegadores que respetan standares, para ie, tendrás que usar o los comentarios condicionales, o un hack, en cualquiera de los dos casos deberás poner lo siguiente:

Código CSS:

#padre{
height: 800px; <--------- numero cualquiera.
overflow:visible;
}
 

Esto pq IE trata el height, como si fuera un min-height, y se estira cuando lo sobrepasan.

Saludos!!