[Résolu] Flottant qui ne flotte pas vraiment

Bonjour à tous,

J'ai un soucis (si si, ça arrive) avec un comportement classique flottant, mais un bug que je n'avais jamais encore rencontré.

Imaginez la scène :
- un conteneur avec :
- un bloc 1 flottant à droite
- un bloc 2 muni d'un arrière plan

Sur IE : l'affichage est correct, le bloc 2 s'arrête à gauche du flottant


Sur FF et autres, le bloc 2 passe sous le flottant


Je rappelle qu'il ne s'agit pas d'un problème de débordement de flottants puisque les deux blocs sont frères et distincts.

Voici la page en ligne : http://kiwi.alsacreations.fr/tmp/test.html

Alors, je n'ai pas les yeux en face des trous ce matin ?
Modifié par Raphael (03 Nov 2006 - 18:10)

Salut,

Si je ne m'abuse, un bloc flottant sort du flot normal, et, contrairement aux idées reçues, ne décale pas les blocs qui sont dans le flot normal mais seulement leurs blocs de lignes. Il est donc normal que le background prenne ici toute la largeur de la page.

Si tu mets un contenu textuel long dans le bloc de gauche, il n'ira par contre pas empiéter sur le bloc de droite (puisque ses blocs de ligne s'arrêteront avant).

Je sais que tout ça n'est pas très clair, mais c'est tout ce que j'ai à proposer.

Edit : petite image fournie gracieusement par le W3C :
http://www.w3.org/TR/REC-CSS2/images/float2p.gif
Modifié par Eldebaran (31 Oct 2006 - 13:02)

salut

Eldebaran a écrit :
et, contrairement aux idées reçues, ne décale pas les blocs qui sont dans le flot normal mais seulement leurs blocs de lignes.

+1

Malheureusement ce n'est pas seulement contrairement aux idées reçues mais aussi contrairement au comportement d'IE à partir du moment où le haslayout s'en mêle. Ce qui est le cas dans l'exemple de raphaël (en raison du height:50px; appliqué au div non identifié)
Modifié par clb56 (31 Oct 2006 - 12:57)

clb56 a écrit :
Malheureusement ce n'est pas seulement contrairement aux idées reçues mais aussi contrairement au comportement d'IE à partir du moment où le haslayout s'en mêle. Ce qui est le cas dans l'exemple de raphaël (en raison du height:50px; appliqué au div non identifié)

D'accord.

Du coup, il n'y a aucun moyen d'avoir un comportement normal avec IE dans ce cas-là ? A ma connaissance, il n'est pas possible de mettre hasLayout à false si l'on veut garder une propriété qui l'a mis à true.
Modifié par Eldebaran (31 Oct 2006 - 13:11)

clb56 a écrit :
Ce qui est le cas dans l'exemple de raphaël (en raison du height:50px; appliqué au div non identifié)

En fait, le problème est exactement identique sans le height.

Du coup, puisque c'est le comportement standard, voyez-vous une solution pour obtenir le comportent affiché par IE (c'est ce que je cherche à obtenir en fait) ?

Avec IE 6 chez moi, la suppression de height: 50px; règle le problème.

Salut,

Vu que le block rightcontentsummary est placé en float et donc sort du flux, pourquoi ne pas mettre un margin-right de 200px sur l'autre div ?

koala64 a écrit :
Salut,

Vu que le block rightcontentsummary est placé en float et donc sort du flux, pourquoi ne pas mettre un margin-right de 200px sur l'autre div ?

Parce que je voudrais conserver le comportement flottant : les blocs de gauche doivent s'écouler *autour* du bloc flottant de droite.

Raphael a écrit :

En fait, le problème est exactement identique sans le height.

Non, pas pour IE. C'est ce que j'indiquais.

Raphael a écrit :

Parce que je voudrais conserver le comportement flottant : les blocs de gauche doivent s'écouler *autour* du bloc flottant de droite.

on peut contourner en ajoutant :

#rightcontentsummary {
background:#fff;
z-index:100;
}

Même si je pense que la solution de Koala est mieux si #rightcontentsummary doit bien avoir un width.
Modifié par clb56 (31 Oct 2006 - 14:54)

bonjour,

heu , bizarrement pour moi dans IE6 et ff , le block vert passe sous le flottant.

Pour ce probleme de "layout" , je serais tenter de dire que la solution serait de le provoquer dans ces 2 navigateur a l'aide de cette regle:

p {
overflow:hidden;
_display:inline-block;
}

Si le resultat recherché est bien sur de ne pas debordé sous le flottant .
<edit>
bien entendu , passé le flottant le p ne vas pas se contorsionné , mais les suivant devraient s'etalé sur l'ensemble de la page .</>

++
Modifié par gcyrillus (31 Oct 2006 - 14:58)

clb56 a écrit :


on peut contourner en ajoutant :

#rightcontentsummary {
background:#fff;
z-index:100;
}

Ce n'est effectivement pas la meilleure solution.
Je viens de mettre à jour la page de test : http://kiwi.alsacreations.fr/tmp/test.html

Et tu comprendras mieux le contexte "réél".

Les blocs doivent bien s'arrêter à gauche avant le #rightcontentsummary et, de plus, s'écouler autour de lui comme le comportement logique d'un flottant.

C'est étonnant que je n'aie jamais été confronté à un tel cas !

gcyrillus a écrit :

Pour ce probleme de "layout" , je serais tenter de dire que la solution serait de le provoquer dans ces 2 navigateur a l'aide de cette regle:

p {
overflow:hidden;
_display:inline-block;
}

Hoilà malheureux : surtout plus de hack maintenant que IE7 est sorti !

EDIT : par contre, un overflow : hidden semble fonctionner en effet :
http://kiwi.alsacreations.fr/tmp/test2.html
Modifié par Raphael (31 Oct 2006 - 14:59)

:) , les commentaires conditionnels sont plus que jamais de rigueurs

++

Je n'arrive pas à comprendre en quoi la solution de Koala ne convient pas.

clb56 a écrit :
Je n'arrive pas à comprendre en quoi la solution de Koala ne convient pas.

Parce qu'il y'aura une margin à droite de tous les <p>, or je veux que les <p> se comportent comme avec un bloc flottant : s'écouler autour (d'abord à gauche, puis en dessous) :
http://kiwi.alsacreations.fr/tmp/test3.html
Modifié par Raphael (31 Oct 2006 - 15:09)

Bon ben après mutli tests.
C'est ok sur FF1.5, IE 5.0, IE5.5, IE6, IE7, Netscape 8, Opera 7 et 8.

Bref, merci gcyrillus pour l'idée du overflow hidden

J'attends une éventuelle autre réponse avant de classer ça en résolu
Modifié par Raphael (31 Oct 2006 - 15:09)

Question bête : pourquoi est-ce que l'on aboutit à ce résultat avec overflow: hidden; ?

Eldebaran a écrit :
Question bête : pourquoi est-ce que l'on aboutit à ce résultat avec overflow: hidden; ?

Justement, c'est aussi un peu ce que j'attends avant de définitivement clore le sujet.