Multiple float / clear - comment faire

Bonjour,

J'ai un petit problème et je me demande si il y a une solution. Pour expliquer en image voici le "cas":


Dans le DIVLEFT, j'ai un menu de navigation d'où le "float: left". Ensuite dans le div du corps de la page "DIVBODYTEXT" j'insère des block de texte "DIVBLOCKTEXT" qui doivent pouvoir contenir une image, à mettre sur la gauche. Il est possible de mettre "float: left" pour l'image.

Le texte autour ne pose pas de problème sauf quand il est plus court que l'image. A ce moment là, le prochain "DIVBLOCKTEXT" continue à droite de l'image.

Si je mets un

DIVBLOCKTEXT {clear: left}

, tous mes textes apparaissent en bas de page, après le menu

Est ce qu'il y a moyen de faire ce "clear" uniquement par rapport au div DIVBODYTEXT ?
Modifié par doykati (26 Jan 2006 - 15:40)

Text effacé ... en mettant la 2ème image, ça a merdé et effacé l'autre...
Modifié par doykati (26 Jan 2006 - 15:41)

Ca m'interresse aussi

Et voici le cas en vue reel avec un border 1px pour montrer DIVBLOCKTEXT

Et en rajoutant un

<div style="clear: both;"></div>

juste avant la fin de chaque DIVBLOCKTEXT contenant une image flottée, pour faire rentrer l'image dans la hauteur du bloc ?

Salut,

j'ai été confronté au même problème que toi... faire un float:left imbriqué dans un bloc contenant lui-même un autre float:left(le menu de gauche). Le clear:both fonctionne sous IE et FX mais sous Opera: ça déplace le bloc en dessous de tous les autres...Ce qui n'est pas si illogique étant donné qu'avec un clear both...l’élément se déplace sous chacun des éléments précédents http://wiki.media-box.net/documentation/css/clear. Du coup, je me suis servi d'un tableau pour faire ce que je voulais...

Bonsoir,

CSS2.1 prévoit ce cas de figure et permet de limiter très facilement l'action d'un "clear" par la création d'un nouveau "contexte de formatage bloc" entourant les flottants sur lesquels on veut le voir réagir.

Un article est en cours sur le sujet (tiens, ça va me booster pour le finir ce week-end ). Pour l'instant, voir http://test.blog-and-blues.org/clear-and-block-formatting-contexts/ . Allez, je vous promets l'article pour lundi (tout est déjà dans le test, en fait)

L'amusant dans l'histoire, c'est qu'IE n'implémente absolument pas cette partie de CSS2, mais qu'il en reproduit les comportements en raison de ses bugs liés au haslayout (voir http://test.blog-and-blues.org/haslayout/tests/float2.html ). Autrement-dit :
- seules celles des propriétés de contexte de formatage qui génèrent le haslayout auront de l'effet dans IE sur la propriété clear (float, position:absolute et son pseudo display:inline-block, mais pas overflow ni display: table-cell)
- mais aussi d'autres propriétés qui ne génèrent aucun contexte de formatage dans les navigateurs conformes, mais qui génèrent le haslayout dans IE (width, height et le merveilleux zoom, plus le potentiellement merveilleux writing-mode).
- Sans compter les éléments ayant le layout par défaut (table).

Ajoutons-y que FF ne connaît pas le display:inline-block pourtant prodigieusement pratique et implémenté par les autres navigateurs conformes... Bref, c'est parfois assez amusant quand on veut combiner ce qui fera réagir chaque navigateur comme attendu pour contrôler les effets d'un clear

Ici, par exemple, on pourrait jouer sur un "height:1%" ( ou un zoom si le problème d'IE5.0 ne se pose pas) pour IE, en commentaires conditionnels comme d'habitude. Et un display:table-cell pour les navigateurs conformes. Très hype, le display:table-cell

Ou beaucoup plus banal : faire flotter le conteneur de la partie de droite. Mais bon, c'est moins rigolo.
Modifié par Laurent Denis (26 Jan 2006 - 19:13)

bonsoir,

Le display:table-cell ne revient-il pas à créer un tableau? Sinon quels en sont les avantages?
Et ce nouveau "contexte de formatage bloc" CSS2.1 qui permet de limiter l'action d'un clear, n'est-il pas trop récent pour pouvoir l'utiliser sans risque?

ilhooq a écrit :
bonsoir,

Le display:table-cell ne revient-il pas à créer un tableau?

Absolument pas. C'est le même mode de formatage visuel (mode de rendu affiché si vous préférez) qu'un tableau HTML. Mais pas la même structure. Juste une question de cosmétique, en somme.

ilhooq a écrit :

Sinon quels en sont les avantages?

Le fait de pouvoir utiliser les propriétés CSS telles qu'elles sont définies dans le contexte de la mise en forme de tableau. Exemple simple: vertical-align:center centre n'importe quoi verticalement dans ce contexte. Ce qu'il ne fait pas du tout dans un contexte de display:block/inline (voir FAQ du forum).

ilhooq a écrit :

Et ce nouveau "contexte de formatage bloc" CSS2.1 qui permet de limiter l'action d'un clear, n'est-il pas trop récent pour pouvoir l'utiliser sans risque?

Question qui n'a en fait pas beaucoup de sens, pour tout dire : CSS2.1 est une reformulation de CSS2.0 déterminée par les implémentations de celle-ci dans les navigateurs. C'est justement parce que les navigateurs avaient implémenté CSS2.0 en élaborant quelque-chose d'imprévu (pour faire très rapide) qu'on l'a intégré dans CSS2.1.
Modifié par Laurent Denis (26 Jan 2006 - 21:53)

bonjour,
ton clear left; prends en compte le menu de gauche aussi, pour le mettre hors jeu et autorisé tes elements a s'etirer dans les navigateurs autre que IE , il me vient a l'esprit 2 soluces:
1) la premeier palcer ton menu en

position:absolute;

pour le sortir du flux
2) de de ne pas donner de dimension de hauteur aux conteneurs a droite en leur appliquant un :

overflow:hidden;/* ou auto , */

.

... Je vais aller voir les lien de Laurent denis, car je reste curieux, même si quelques clicks supplementaire sont parfois decourageant.

a plus

gcyrillus a écrit :

2) de de ne pas donner de dimension de hauteur aux conteneurs a droite en leur appliquant un :

overflow:hidden;/* ou auto , */

.

Ce qui consiste justement à créer un contexte de formatage

Comme promis: http://www.blog-and-blues.org/articles/Float%2C_clear_et_contextes_de_formatage

Laurent Denis a écrit :
Comme promis:

Excellent article !

Par contre, la conclusion finale ne parait pas claire pour un non initié :
- suffit-il d'avoir recours à un height:1% ?
- faut-il y ajouter un overflow: auto; ?
- doit-on mixer les deux ? Si oui, comment concrêtement ?

Je pense qu'une solution plus explicite ferait des heureux

une Solution simple pour aller dans l'idée de doykati:

body{margin:0;padding:0}

hr {clear:both}

.sous_gauche{
float:left;
width:100px;
height:100px;
background-color:#339900;
}

#content{width:778px; background-color:#996666}

#gauche{float:left; width:178px; background-color:#336699}

#droite{float:right; width:600px; background-color:#FFCC99}

<body>
<div id="content">
  <hr />
  <div id="gauche">
    <ul>
      <li>menu1</li>
      <li>menu2</li>
      <li>menu3</li>
      <li>menu4</li>
    </ul>
  </div>
  <div id="droite">
  	<hr />
    <div class="sous_gauche"></div>
    blablabla bla blalablal la dhh  is ddshdq sdj hsjd dssdqd shdblab labla bla blalablal la dhh  is ddshdq sdj hsjd dssdqd shd
    blablabla bla blalablal la dhh  is ddshdq sdj hsjd dssdqd shd
    <hr />
    <div class="sous_gauche"></div>
    blablabla bla blalablal la dhh  is ddshdq sdj hsjd dssdqd shdblab labla bla blalablal la dhh  is ddshdq sdj hsjd dssdqd shd
    blablabla bla blalablal la dhh  is ddshdq sdj hsjd dssdqd shd blablabla bla blalablal la dhh  is ddshdq sdj hsjd dssdqd shdblab labla bla blalablal la dhh  is ddshdq sdj hsjd dssdqd shd
    blablabla bla blalablal la dhh  is ddshdq sdj hsjd dssdqd shd blablabla bla blalablal la dhh  is ddshdq sdj hsjd dssdqd shdblab labla bla blalablal la dhh  is ddshdq sdj hsjd dssdqd shd
    blablabla bla blalablal la dhh  is ddshdq sdj hsjd dssdqd shd
    <hr />
    <div class="sous_gauche"></div>
    blablabla bla blalablal la dhh  is ddshdq sdj hsjd dssdqd shdblab labla bla blalablal la dhh  is ddshdq sdj hsjd dssdqd shd
    blablabla bla blalablal la dhh  is ddshdq sdj hsjd dssdqd shd
    <hr />
  </div>
</div>
<hr />
</body>

aperçu ici : http://ideaweb.free.fr/alsa/testfloat.html

Par contre on perd la couleur de fond du div "content" sous FF 0.9 et Opera 8.51 mais pas sous IE à moins de définir une hauteur...chose assez délicate.