Flottants et redimensionnement fenetre manuellement

Bonjour,

J'ai des div flottants dans un div qui s'ajuste selon la largeur disponible.
Sous FF, pas de soucis lorsqu'on redimensionne la fenetre du navigateur manuellement, les div se mettent en dessous et le div conteneur s'agrandit en hauteur mais sous IE, le div conteneur ne s'agrandit pas en hauteur quand les div flottants viennent un en dessous de l'autre... du coup on ne voit plus ceux qui sont en dessous...

<div id="stylized" class="maclasse">
<div class="flottant"></div>
<div class="flottant"></div>
<div class="flottant"></div>
<div class="flottant"></div>
</div>

.flottant
{
float:left;
margin:0 0 5px;
width:470px;
}

#stylized
{
background:#EBF4FB none repeat scroll 0 0;
border:2px solid #B7DDF2;
}

.maclasse
{
margin:0 auto;
overflow:hidden;
padding:14px;
}

Y a-t-il un moyen simple pour corriger ce probleme svp ?

Merci
Bonne journee

Le meilleur moyen de te rendre compte du problème, ajoute des bordures à tes éléments. ( Rouge pour ton conteneur et bleu pour tes éléments flottants )

Si tu ajoutes float:left à div#stylized, ça règlera tes problèmes

Merci ca marche
mais sous IE, la largeur du div conteneur prend exactement la taille de ce qu'il y a dedans au redimensionnement et donc retrecis tandis que sous FF il reste a sa largeur de depart (ce que j'aimerais comme comportement en fait) c'est possible ? J'ai essaye avec un width:100% mais ca cree des problemes avec mon conteneur d'au dessus parce que mon conteneur devient plus grand que lui bizarrement...

De plus, est-il possible de centrer les divs flottants au milieu du div conteneur ?

Merci

italiasky a écrit :
J'ai essaye avec un width:100% mais ca cree des problemes avec mon conteneur d'au dessus parce que mon conteneur devient plus grand que lui bizarrement...

C'est normal : tu as déclaré des bordures et une marge interne (padding). Le modèle de boîte fait que les marges internes et les bordures sont exclues du calcul des propriétés width et height.

italiasky a écrit :
sous IE, le div conteneur ne s'agrandit pas en hauteur quand les div flottants viennent un en dessous de l'autre

Si ce problème ne se produit que sous IE 6, il faut activer le haslayout sous IE 6 afin que ce dernier prenne en compte le contexte de formatage créé par overflow: hidden, de la manière suivante :

.maclasse {
  height: 1%;
}

Cette solution permet d'éviter de mettre le conteneur en positionnement flottant.
Modifié par Victor BRITO (05 Feb 2010 - 21:20)

D'accord pour le modèle des boites, mais dans ce cas la solution consiste à quoi je ne comprends pas trop ? A placer dans un div qui n'a aucune marge, padding qui prend une largeur de 100% et ce qui est dedans sans spécifier la largeur ?
Mais je pense que si je ne spécifie pas de width j'aurais toujours le problème sous IE que la largeur du div suit ce qu'il y a dedans alors que je souhaite qu'elle prenne toute la largeur, quelle que soit la façon dont sont positionnés les flottants.
De plus, est-il possible de centrer les divs flottants au milieu du div conteneur une fois que celui-ici gardera sa largeur qui doit occuper tout l'espace ?

Cette solution permet d'éviter de mettre le conteneur en positionnement flottant.
Est-ce dérangeant qu'il soit en positionnement flottant ?

Merci
Bon weekend
Modifié par italiasky (07 Feb 2010 - 15:34)