[Résolu]Problème de bordure chez Firefox

Bonjour,
Je suis en train de refaire les pages de mon site en m'efforçant d'utiliser les CSS pour toute la mise en forme. J'ai presque réussi à passer toutes les difficultés liées aux affichages différents selon IE ou Firefox. Subsiste ce problème : sur cette page, un div (#principal) a une bordure rouge qui ne l'encadre pas totalement (au niveau du titre "l'empreinte romaine"). La bordure ne fait que 1 ou 2 cm de haut alors que son contenu est beaucoup plus long. J'ai résolu le problème sous IE 7 en mettant à ce div#principal "height:100 %" mais ça ne marche pas sous Firefox 2 .

Je ne comprends pas pourquoi j'ai ce problème de bordure sur ce conteneur générique alors que les autres se comportent parfaitement.

Merci
Modifié par Osbern (12 Jan 2008 - 15:47)

Bonjour,

#principal contient 2 div qui sont tous les deux flottants. Un flottant sort du flux, par définition, donc au final #principal n'a plus de hauteur (j'ai pas cherché d'où viennent les 2px que trouve Firebug)
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html t'indique comment forcer le div parent à avoir une hauteur en y incluant un div doté de la propriété clear: both; (commence la lecture par la page 1, mais la solution est sur la page 2 )
En passant, la formulation

a écrit :
On peut obliger les éléments flottants à rentrer dans le "flux" de leur élément parent.

me parait fausse, un flottant reste en dehors du flux ... Visuellement peut-être.
J'ai plus l'habitude de la formulation de Raphael ça permet de "pousser" le conteneur, c'est plus imagé (au final, c'est le même effet)

bonjour , c'est vrai que ces flottants ne sont pas claire

A moitié sortit du flux , ils peuvent occuper laisser un element block adjacent occuper le même espace , il semble donc sortit du flux , cependant les contenus de ces differents element ne s'y trompe pas et ne se chevaucheront pas .

Ils sont comme une ancre , qui laisse la un contenu qui va squatter la place dont il a besoin sans provoquer un obligatoire retour a la ligne aprés lui. Une espece de post-it intelligent en somme.

GC

Merci Felipe pour m'avoir fait comprendre le problème. Grâce à ton explication et au commentaire de gcyrillus, j'ai même compris une autre bizarrerie d'affichage dans ma page mais que j'avais réussi à contourner. Dommage que les solutions proposées ne marchent pas sur tous les navigateurs. Mais ton explication m'a fait progresser.