[Résolu]3 colonnes, clear, float left et margin left

Bonjour,
Je rencontre un petit soucis et là je suis en train de me casser les dents dessus.
Voici les données du problèmes.
Je fais une mise en page en 3 colonnes (méthode classique : une colonne de gauche avec un float:left, une colonne de droite avec un float:right et une colonne centrale)

La colonne centrale contient des éléments en clear:both.
pour éviter tout problème j'ai appliqué un contexte de formatage (http://www.blog-and-blues.org/articles/Float%2C_clear_et_contextes_de_formatage pour plus d'infos) sur lme bloc centrale via un overflow:auto.

Du coup, le clear ne fait pas sauter les éléments sous les colonnes de droites et de gauches.

J'ai testé sous IE6 et 7, opera et Firefow windows.
Pas encore testé sous mac mais à faire bien sûr.

Tout va bien, sauf sous firefox :
le margin-left:200px du bloc centrale ne pars pas du bloc conteneur, mais à partir du menu de gauche.

Je ne vous fait pas plus de blabla et vous donne carrément l'url de l'exemple : http://www.data4dev.com (site de test temporaire)

Vous verrez donc que sous firefox la partie centrale est décalée sur la droite de 200 pixels (comparez avec ce que ça devrait donner sous ie7 ou opera par exemple).

Que dois je faire ?
Modifié par tanuki (06 Jul 2007 - 10:45)

Bonjour et bienvenue à toi sur le Forum,
Ce tutoriel-ci ne pourrait-il pas t'aider ?

Enlever l'overflow de la partie centrale résoudra le problème. Au passage, pourquoi toutes ces positions relatives? Au fait, le résultat est correct sur Safari...

Merci. J'avais déjà été voir ce tutoriel mais je n'ai pas poursuivi jusqu'au bout.
Il me semblait en effet qu'il ne me permettait pas de résoudre mon problème. Ceci dit je vais me permettre d'y consacrer un peu plus de temps.

Sinon, je ne peux pas enlever l'overflow:auto. ça corrige en effet mon problème de margin sous firefox. Mais du coup, mon problème de clear ressurgit. La colonne du milieu, comme vous pouvez le voir contient des articles, dans lequel ilpeut y avoir des images en float:left. Du coup, pour séparer les articles entre eux et éviter, j'ai rajouté un séparateur entre eux (un hr, avec, entre autres la propriété clear:both). Il m'a fallu donc définir un contexte de formatage dans ma colonne centrale, ce que j'ai fait avec overflow:auto.

Concernant les position relative, c'est certainement pour positionner les blocs les uns par rapport aux autres. Rien de mal à cela je pense...
A vrai dire, j'ai fait cette feuille de style il y a quelques temps déjà, et j'ai simplement besoin de faire quelques corrections dessus.

Aurais-je du faire autrement ? Je n'ai certainement pas votre expérience mais je fais au mieux pour respecter certaines règles, et faire en sorte que l'html ne contienne que des indications sémantiques, et que ma feuille de style soit la plus simple possible. J'ai trop vu certain de webdesigner bosser sur des CSS de 1000 lignes avec des propriété qui n'ont pour but que de contredire d'autres qui ont été définies ailleurs. Enfin, disons que je n'étais pas mécontent du travail que j'avais fait pour cette feuille de style...

Il faut retirer la marge du conteneur central, car elle n'a plus lieu d'être avec le contexte de formatage.
Ensuite, le bug arrive chez IE, et il faut donner à la conlonne centrale un "haslayout" avec les commentaires conditionels...

d'ailleurs si je comprends bien, à partir du moment où j'établis un contexte de formatage -overflox:auto, ou hidden- sur le bloc centrale (#pageContent) je ne devrais pas avoir à spécifier un margin-left. Dans ce cas, firefox se comporte correctement. C'est donc IE7, IE6 et Opera qui ne se comporte pas correctement. Ce qui me surprend d'ailleurs par rapport à Opera !

Ou alors, quelque chose m'échappe encore...

Merci Yahrou, c'est ce que je commençais à me dire.
Cependant je suis surpris : le comportement actuel de cette page sous firefox est donc normal. Mais alors pourquoi Opera et Safari (mac) ne se comportent pas comme cela ?
Et au passage, je ne suis pas réellement amoureux des hacks en tous genre et j'essaye de m'en passer, donc si je peux éviter de modifier ma page html en y rajoutant cet horrible bout de css, je préfèrerai...

j'oubliais aussi une petite précision : le site est complètement dynamique, et même si nous nous sommes arrangé pour que les éditeurs, malgré leur connaissance nulle de l'html, ne fassent pas de fausses manipulations, on ne sait jamais. Je dois donc prendre en compte un grand nombre de cas de figures...

Les commentaires conditionnels ne sont pas des hack, c'ets un système tout à fait perenne et pratique pour donner des instructions uniquement à IE (ou une de ses versions).
C'est justement la meilleure manière de corriger les bugs IE, et c'est la seule qui t'évite les vrais "hack" se basant sur les bugs ie, genre de faire commencer tes propriétés css par _ ...
Si tu refuses d'utiliser les commentaires conditionnels, tu vas avoir du mal à créer un design un tout petit peu compliqué et proprement codé...
Modifié par yahrou (06 Jul 2007 - 10:04)

Je ne veux pas polémiquer sur ce point. Je pense simplement qu'en creusant un peu, je pourrai peut être trouver une solution satisfaisante sans en arriver là...
Donc, pour vous montrer, j'ai mis le margin-left à 20px. C'est l'écart que je veux entre mon bloc de gauche et celui du centre. Nickel sous firefox, mais sous IE7, 6, opera et safari, le bloc central est collé sur le flottant de gauche... Donc ça n'est toujours pas résolu...

Pour moi tout est bon affichage sous ie6et7 et Ff et opera

Ah !
Toutes mes confuses !
J'ai manqué un paragraphe pourtant cruciale dans ma compréhension du problème. dans le tutoriel :

a écrit :
Remarquez comme on a donné aux deux flottants de petites marges ? Elles serviront à créer un retrait entre les flottants et le bloc central. Attention : il est préférable de ne pas attribuer de marges latérales à div#centre, car les résultats dans les différents navigateurs peuvent être très divers.

Je savais bien en ouvrant ce sujet que j'allais m'en mordre les doigts, et que ce site magnifiquement conçu est une bible qu'il ne faut pas sous estimer. Je vous demande pardon (monsieur Manatane).

Cela fonctionne à merveille sous :
Firefox2 (win/mac)
IE7
IE6
Opera
Safari (mac)
Je pense que la liste des navigateurs est suffisante.

Juste une dernière remarque (avant de mettre mon problème en résolu) pourquoi cela fonctionne t'il sous IE6 ?
Modifié par tanuki (06 Jul 2007 - 10:35)

Ton bloc central a une largeur fixe, ce qui lui donne le haslayout...

Par contre, pour les largeurs fluides (que permet ce model) il faut passer par un commentaire conditionnel pour ie6...

Merci beaucoup !
Je comprends mieux maintenant.
J'espère en tous cas, malgré la redondance avec le tutoriel que mon problème pourra en éclairer d'autres.