Bloc flottant élastique sans spacer

bonsoir,

Soit un div.bloc0{float:left;} avec un certain contenu, soit un div.bloc1{float:right} dans lequel il y a un div.bloc2{float:left} et un div.bloc3{float:right;}, le bloc1 ne devrait pas s'étirer selon les blocs imbriqués tant qu'il n'y a pas de troisième div.bloc4{clear:both;} ou <hr>, avec hr{clear:both;}

Or je n'ai pas mis de div{clear:both;} ni de <hr>, et pourtant le div.bloc1 s'adapte quand-même !

Personnellement je ne m'en plains pas puisque le rendu est parfait, mais c'est juste que je ne comprends pas... et sans comprendre il m'est difficile de prévoir un futur comportement ni les rendus sur chaque navigateurs à chaque version...
Modifié par darkstar2023 (05 Nov 2009 - 18:15)

Salut,

soit un alsanaute quelconque (disons : moi) qui ne comprend pas de quoi tu parles. Serait-il possible de lui fournir un bout de code pour qu'il s'amuse avec ?

Accessoirement j'ai supprimé ton lien en signature car comme indiqué dans l'aide ils ne sont autorisés que lorsqu'ils sont utiles à la communauté.

Salut,

J'essaie de deviner ... Il me semble que tu parles d'un problème de dépassement de flottants qui n'en est pas un étant donné que ton bloc conteneur prend bien en compte la hauteur des éléments enfants qui sont flottants.

Donc la réponse est : c'est normal.

L'explication est : L'une des manières de corriger le problème de dépassement de flottants est de créer un nouveau contexte de formatage sur le bloc conteneur. Ici, le conteneur parent appelé bloc1 a un contexte de formatage bloc créé par l'utilisation de la propriété float.
Pour avoir une vue d'ensemble des propriétés qui génèrent un contexte de formatage bloc, cf :
Un article sur Blog and blues
Modifié par Agylus (13 Oct 2009 - 08:45)

Bonjour,

Pourquoi le bloc1 ne pourrait pas s'étirer ?

À priori (mais sans code c'est pas évident de juger) le comportement est correct.

En fait la structure est la suivante :

<div id="0" style="float:left;">Lorem ipsum</div>
<div id="1" style="float:right;">
    <div id="2" style="float:left;">contenu gauche</div>
    <div id="3" style="float:right;">contenu droit</div>
    <!--<div id="4" style="clear: both;">espace</div>-->
</div>

Bien évidemment, les styles seront mis sur une feuille séparée.
Je me demandais pourquoi le bloc 1 s'adaptait au contenu flottant sans mettre le bloc 4 { clear: both; }.
Modifié par darkstar2023 (13 Oct 2009 - 12:34)

Agylus a écrit :
Salut,

J'essaie de deviner ... Il me semble que tu parles d'un problème de dépassement de flottants qui n'en est pas un étant donné que ton bloc conteneur prend bien en compte la hauteur des éléments enfants qui sont flottants.

Donc la réponse est : c'est normal.

L'explication est : L'une des manières de corriger le problème de dépassement de flottants est de créer un nouveau contexte de formatage sur le bloc conteneur. Ici, le conteneur parent appelé bloc1 a un contexte de formatage bloc créé par l'utilisation de la propriété float.
Pour avoir une vue d'ensemble des propriétés qui génèrent un contexte de formatage bloc, cf :
Un article sur Blog and blues

J'ai compris (enfin je crois)
Donc si le bloc parent est aussi doté de la propriété float, il s'étire selon les blocs enfants flottants sans mettre un dernier bloc {clear: both;} ?

darkstar2023 a écrit :
Donc si le bloc parent est aussi doté de la propriété float, il s'étire selon les blocs enfants flottants sans mettre un dernier bloc {clear: both;} ?

C'est ça !

bonjour,

attention , ton imbrication de div flottant implique un bug dans IE<8 et FF<2 .
(outils pour tester ta page dans ff2 , et IE6 : http://spoon.net/browsers/ )
pour tester IE7 , ouvrir la page dans IE8 , faire f12 et selectionner : mode navigateur : IE7 .

Voici une page test reprenant ton code qui elimine ce bug , http://gcyrillus.free.fr/essai/bug-IE-FF2-float-left-right.html

cependant , il vaut mieux ne pas provoquer ce bug , la correction est acrobatique et hasardeuse si mal comprise .

Bienvenue dans le mondes des bugs divers et variés .

En general : ne pas abuser des flottements car entre les float (right/left; contexte de formatage et clear ) , nombre de surprises peuvent etre au rendez vous

GC

gc-nomade a écrit :

bonjour,
Voici une page test reprenant ton code qui elimine ce bug , http://gcyrillus.free.fr/essai/bug-IE-FF2-float-left-right.html

Tu es allé un peu vite pour cette page d'essai non ?

gc-nomade a écrit :

cependant , il vaut mieux ne pas provoquer ce bug , la correction est acrobatique et hasardeuse si mal comprise .
Bienvenue dans le mondes des bugs divers et variés .
En general : ne pas abuser des flottements car entre les float (right/left; contexte de formatage et clear ) , nombre de surprises peuvent etre au rendez vous
GC

+1

Merci pour toutes vos réponses toutes intéressantes ))))

Finalement je ne prendrai pas de risque, j'imbriquerai des div sans float; bien que cela semble marcher sur les navigateurs que j'ai testés, y compris les navigateurs collectifs pourris qui servent pour les intranets.

J'ai finalement fait un code imbriqué, vous pouvez le voir à http://dsofficial.free.fr/public/new_themeICI/url] (header) avec le gabarit suivant :

<div id="0" style="float: left;">Lorem ipsum</div>

<div id="1" style="float: right; width: 570px; background: IMAGE 01;">
    <div id="2" style="background: IMAGE 02 right bottom;">
        <div id="3" style="width: 150px; background: IMAGE 03 left bottom;">
            Votre texte sur le header
        </div>
    </div>
</div>

Pour le footer en revanche j'ai imbriqué 3 DIV {float: left} dans un div {float:right;} pour l'instant et ça fonctionne avec Archimed Internet Explorer (similaire à IE6) et IE7

je rectifie, archimed internet explorer est similaire à IE5, mais qu'il ne faut pas négliger vu qu'il est très utilisé par les lieux publics en dépit de sa piètre qualité et ses failles.