[Résolu] Problème de div flottant avec redimensionnement de fenêtre

Bonjour,

Voilà le problème du jour : cela concerne des fiches produits avec différentes caractéristiques. Ces fiches sont ouvertes à partir de listes, et apparaissent sous forme de popup de 800x600.
Sur le premier ordi sur lequel j'ai refait la structure du code, tout allait bien sous IE6 et Firefox. C'est à dire que j'ai dans cette fiche un bloc conteneur div de largeur 100% qui contient 2 autres blocs div flottants de 50%.

- Sous Firefox, aucun souci lorsque le popup s'ouvre, les deux blocs apparaissent côte à côte et en étirant la fenêtre, ils le restent.

- Sous IE6, sur ma première machine de dev, cela marchait bien aussi à l'ouverture du popup, en plein écran aussi. Et là, j'ai du changer de machine, et lorsqu'on ouvre la fiche, les deux blocs flottants sont un au dessus de l'autre. Si j'étire la fenêtre d'1 pixel en largeur, les 2 blocs se repositionnent côte à côte, si j'étire à nouveau d'un pixel ils se replacent un sur l'autre, et ainsi de suite...

Voici le css de ces blocs :

.milieu {
    width: 100% ;
    padding: 0 ;
    margin: 0 0 10px 0 ;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
}

.bloc {
    padding: 0 ;
    margin: 0 ;
    float: left ;
}

Note : le width: 50% ; est attribué au div class="bloc" dans le code HTML directement.

Je ne comprends pas vraiment ce problème...
Quelqu'un aurait il une idée?

Merci d'avance de vos réponses
Modifié par Alphajet (05 Jul 2005 - 15:20)

A noter qu'en mettant un des 2 blocs du milieu à 49% de largeur, le problème n'apparait pas, ce qui tend à dire que c'est bien un problème avec la largeur, et pourtant je spécifie bien un margin et padding à 0.
Modifié par Alphajet (04 Jul 2005 - 14:23)

Hum... ça ressemble furieusement à un bug d'IE que j'ai rencontré, mais pas en popup. Au cas où : la suppression de la largeur .milieu {width: 100% } règle-t-elle le problème ?

En effet, en enlevant la définition de la taille, le problème n'apparait pas, il s'agit donc d'un bug de IE ?

Par contre à présent, au dessous du dernier élément de mon bloc de droite, on aperçoit un tout petit décalage d'1px vers l'intérieur (comme si 50%+50% != 100% )

Merci en tout cas pour l'astuce, je vais voir si j'arrive à éviter ce mini décalage.

(PS: Sous Firefox, toujours aucun problème)
Modifié par Alphajet (04 Jul 2005 - 15:08)

Edit : en plus du mini décalage, j'ai un autre bug d'affichage sur IE6. Sur certaines fiches un peu plus longues que les autres, et donc avec ascenseur, un "trou" apparait en dessous du dernier bloc dans la partie droite (un peu en dessous du décalage de 1px).
C'est à dire que j'ai un rectangle de la couleur du fond de la fiche.
Mais il suffit que je réduise la fenêtre et que je la réagrandisse pour que le bug disparaisse (ou en étirant la fenêtre)

Autre bug de IE ..?

(Merci encore )

Difficile de t'aider sans le code générant ce HTML.

Mais les deux floats y sont pour quelque-chose (IE est un fabuleux générateur de bug sur les flottants ). Peut-être peux-tu lui simplifier les choses :
- en ne conservant que le premier flottant, et en laissant ton deuxième bloc en flux (avec des pétouilles d'alignement vertical à régler)
- ou en passant carrément tout ça en position:absolute.
Modifié par Laurent Denis (04 Jul 2005 - 15:45)

Et bien, le code est assez long, j'ai peur que ça soit un peu indigeste à lire mais je peux le mettre si tu veux.

Je vais essayer de voir en ne mettant qu'un bloc flottant ce que ça donne. Quant à mettre tout ça en position absolue, j'ai peur que ça soit bien difficile de tout positionner correctement vu que de nombreux éléments sont de hauteur variable et/ou n'apparaissent pas selon certaines conditions (photo, conditionnement ....)

Edit : Pour l'instant, la solution la plus "efficace" que j'ai trouvée est de mettre mon bloc de droite avec une taille de 49.9% ce qui là ne pose aucun problème de mise en page (mais ça va m'obliger à reprendre une petite cinquantaine de pages php )
Modifié par Alphajet (04 Jul 2005 - 16:11)