[résolu]Overflow:hidden et infobulle

Bonjour, je rencontre souci embetant sur lequel je ne trouve pas de solution.

J'ai plusieurs <div> positionnés en float:left

le conteneur de ces div est en overflow:hidden

ce qui m'évite de mettre une balise clear inutile.

Jusque la tout va bien, mais mon probleme vient d'une infobulle en position absolute qui apparait à droite des div en float. sur le dernier div en float l'infobulle n'apparait que partiellement puisque le div conteneur est en overflow:hidden.

Quelqun aurait une solution simple, autre que rajouter des clear both et supprimer mes overflow:hidden ?

Merci.
Modifié par r1pairedas (23 Mar 2011 - 13:33)

Bonjour,

J'ai déjà résolu un problème similaire en spécifiant

float:left;
width:100%;

au conteneur, qui créé un nouveau contexte de formatage en gardant la valeur visible pour overflow.

Je ne sais pas ce que ça vaut niveau "beauté du code" mais ça a le mérite de marcher

merci pour cette réponse, je pense que c'est une bonne piste mais ça ne fonctionne pas vraiment.

la page en question est ici : http://www.lecitronvert.org/new/partenaires.php#

J'ai testé ta solution avec firebug et ça déconne pas mal.

Testé sans problème sur chrome 10 et Firefox 3.6, quel est le problème ?

Bonjour,

Désolé, MatTheCat, mais sous FF 3.6.15 le problème est entier .
Et sans utiliser float:left ?

Bien à vous

bonjour,

reste peut-être l'alter-ego du spacer.gif en css:

.box-content:after{content:'';display:block;clear:both;}

en enlevant les overflow:hidden; devenus inutiles sur #wrapper et .box-content par exemple.

Cordialement

ce qui est top avec un div parent en overflow:hidden, c'est qu'il reste dans le flux malgré les div en float qu'il contient.

Avec ta solution ce n'est plus vraiment le cas, puisqu'on rajoute un float:left sur le div conteneur, qui se retrouve lui meme hors du flux. Il faut donc rajouter un overflow:visible, float:left, width:100% sur le conteneur précédent (dans mon cas le div .box-large)

Et ainsi de suite ...

gc-nomade a écrit :
bonjour,

reste peut-être l'alter-ego du spacer.gif en css:

.box-content:after{content:'';display:block;clear:both;}

en enlevant les overflow:hidden; devenus inutiles sur #wrapper et .box-content par exemple.

Cordialement

Oui je peux utiliser cette solution mais en dernier recours, car elle ne fonctionne pas avec ie6, ie7 et meme ie8 il me semble non ?

heu, si pour IE8.

Pour ie7 et 6 un zoom:1; ou height:1%; devrait suffire ....
Modifié par gc-nomade (23 Mar 2011 - 12:42)

ok dans ce cas ça pourrait resoudre parfaitement mon probleme, je vais tester ça.

Je viens de faire quelques test, effectivement avec un zoom:1 tout fonctionne.

Autrement dit, au lieu de rajouter des <div> avec un clear, (donc balises inutiles), au lieu de mettre un overflow:hidden (qui ne permet pas d'afficher du contenu hors du cadre conteneur meme si le contenu est positionné en absolute),

la solution la plus simple et la plus performante reste bien le :after{content:'';display:block;clear:both;}

Je vais donc toujours utiliser cela maintenant
Modifié par r1pairedas (23 Mar 2011 - 12:53)

r1pairedas a écrit :
Je viens de faire quelques test, effectivement avec un zoom:1 tout fonctionne.

Autrement dit, au lieu de rajouter des &lt;div&gt; avec un clear, (donc balises inutiles), au lieu de mettre un overflow:hidden (qui ne permet pas d'afficher du contenu hors du cadre conteneur meme si le contenu est positionné en absolute),

la solution la plus simple et la plus performante reste bien le :after{content:'';display:block;clear:both;}

Je vais donc toujours utiliser cela maintenant

:), oui mais non , il vaut mieux connaitre comment chacune de ces possibilités fonctionnent ou se comportent et utiliser la plus adaptée au cas par cas .

bonne continuation