[RESOLU] Problèmes de flotement des colonnes

Hello,

J'ai à intervenir sur un bug pour le site de nestle.com.
Le bug est visible sous firefox.
Le code est assez diffus et généré par de l'asp .NET 1.1, c'est pas vraiment un exemple...
Par contre le bug est facilement identifiable sur la page :
sur la home page de www.nestle.com (sous firefox), on voir deux colonnes de contenus occupant le centre de la page, elles ont respectivement une barre jaune et une barre rouges au-dessus.
Le problème est le suivant : lorsque redimentionne la largeur du navigateur, les 2 colonnnes se redimentionne aussi avec leur contenu, sauf qu'à un certain moment la colonne de droite passe sous celle gauche.
Comment empêcher cela?Je veux que le contenu de la colonnne de droite se fige à une valeur minimale.

UNe solution provisoire pour IE fut de de placer le code :

<img src="/Img/p.gif"  alt=" " width="1000px" height="1px" />

directement sous la balise </body>
Mais ce n'est pas vraiment une solution car du coup les colonnes sont figées lors d'un redimentionnement de la largeur du navigateur, ce que je ne veux pas non plus...

Merci de votre aide

Pascal

PS 1: le code est assez diffus et les CSS pas toujours très corrects (on y trouve des float inutiles), les colonnes concernées sont contenues dans le DIV avec l'id "dottedline2".

PS 2 : pour l'instant j'ai essayé pas mal de solutions, j'ai déjà remplacé le "float : inherit" de la colonnne 2 par un "float:left" et oté le float du conteneur parent inutile, rajouté un min-width à col2 mais sans succès.
Une autre voie d'investigation fut d'abandonner le positionnement flottant pour un positionnement absolu :
- j'ai mis le conteneur "dottedline2" un position : relative
- j'ai mis les 2 colonnes en position absolues
=> sous firefox, j'obtiens alors le résultat attendu, saus que le pied de page avec son menu "help","Sign me",etc. se trouvera alors superposé, vu que les colonnes sortent du flux. Et sous IE 6.0, il n'apparait rien du tout , aucun contenu central, bizarre.
Modifié par Pascal68bis (13 Dec 2007 - 17:56)

Salut,

Il faut traquer les valeurs de largeur imposées à tes colonnes : le conteneur des 2 colonnes est à 98%, plus des valeurs de padding, et les colonnes font respectivement 48,5 et 50,5% ... en gros, ça dépasse de la largeur disponible !
Pour imposer une largeur minimale, je te conseille d'utiliser la propriété "min-width" et d'appliquer l'astuce décrite dans ce point de la FAQ via un commentaire conditionnel pour IE.

Merci pour ton aide!
J'ai traqué la valeur min-width du conteneur "#container" pour laquelle la colonne de droite ne passe plus en-dessous : 788px. A partir de cette valeur-là, ça fonctionnne comme il faut ... sous FIREFOX.

Mais pour IE c'est pas ça : la subtilité que tu mentionnes en faisant allusion à la FAQ est déjà utilisée :

width: expression(document.body.clientWidth > 959 ? "958px" [decu] document.body.clientWidth < 761? "760px" :"auto" ));

Je l'ai remplacée par :

width: expression(document.body.clientWidth > 959 ? "958px" [decu] document.body.clientWidth < 789? "788px" :"auto" ));

Le problème est que ça ne marche pas sous IE
Modifié par Pascal68bis (13 Dec 2007 - 17:08)

Le problème vient des largeurs définies pour les colonnes, pas de la largeur totale

J'ai donné une largeur de 44 % à ma colonne de droite et ça fonctionne.
Au delà (45%), ça se remet en-dessous.
Je laisse donc comme ça

Merci

Juste une dernière petite question :
dans les css du site sous certaine selecteur, je trouve parfois la un float et un clear en même temps. exemple :
#selecteur {
float : left;
clear : left;
}

Je suppose que ce genre de chose n'a aucun sens, et est donc à supprimer, ou bien? Pour moi, une operation (clear) annule la précédente (left)

Pascal68bis a écrit :
Je suppose que ce genre de chose n'a aucun sens

Si, si ! le clear se réfère à (aux) l'élément(s) en float placé(s) avant dans le même bloc conteneur .