div que contiene cosas que flotan no las rodea del todo

[darkgaze]

Pues siempre el mismo problema

tengo un div que contiene cosas que flotan.

con lo cual este div entiende que nada hay dentro más que cosas que desconoce y por lo tanto no ocupa todo el estpacio que ocupan sus elementos flotantes interiores.

(o sea, por ejemplo que dentro hay divs flotantes con texto pero el contenedor padre que tiene fondo rosa, por ejemplo, no rodea el texto sino que se queda en una linea arriba).


Siempre me veo obligada a incluir un triste hack que es un elemento div al final vacío con clear: both para que el div padre comprenda que ahí acaba el espacio de todo y rellene bien todo con fondo rosa.


Esto no se hace así...verdad?... como se hace para que entienda que hay cosas dentro que ocupan tamaño!??

[juaniquillo]

Según las especificaciones de la W3C, el contenedor padre que contiene elementos con float debe colapsar, ese es el comportamiento que debe seguir. Para remediar esto haces los siguiente:

- Pones un overflow:auto; al contenedor padre. (esto para todos los navegadores que aplican CSS2 correctamente)

- Pones un ancho (casi siempre width:100%; aunque no lo necesites) al contenedor padre. (esto espara internet explorer). Acuerdate de que si pones un ancho de 100% a eso se le suman el padding y los bordes de mismo, asi que lo mejor es que el elemento padre no tenga nada de eso o darle un ancho exacto en pixeles.

Has estas dos cosas y recuperarás el contenedor padre.

[darkgaze]

Tota tomate.


Pues no lo sabía... O_O

puf. voy a probarlo. Seguro que funciona. Gracias!!! este foro es lo mejor. Te conetstan siempre en menos de un día..

gracias!!