Float et dépassement de bloc [RÉSOLU]

Bonjour
Sous certains navigateurs et notamment Opera et Chrome, les containers en float dépassent sur les bloc suivants.
Un exemple ici
Ce phénomène est-il le même que celui évoqué ici http://www.alsacreations.com/astuce/lire/7-comment-viter-que-mes-lments-flottants-float-dpassent-de-leur-conteneurnbsp.html ?
Si oui, j'ai appliqué la méthode du bloc spacer et clear:both, mais le résultat donné est décevant et décale ma mise en page comme on peut le voir sur l'image suivante :
http://img40.imageshack.us/img40/743/sanstitre1oo.jpg
Modifié par Sam Soul (06 Nov 2009 - 20:53)

Sam Soul a écrit :
Ce phénomène est-il le même que (...)

Non.

L'article décrit le fait que les éléments flottants dépassent de leur conteneur. Ici, tu n'as pratiquement pas de conteneurs.

Et cette différence de comportement d'éléments flottants est-il connu ? Y-a t-il une parade spéciale ou dois-je adapter la page avec un min-height par exemple ?

Une parade simple à mettre en place consiste à ajouter un élément contenant tes éléments flottants, comme suit :

<div id="conteneur">
  <div>élément flottant</div>
  <div>élément flottant</div>
  <div>élément flottant</div>
</div>

et à appliquer un contexte de formatage, comme suit :

/* Les éléments flottants */
#conteneur div {
  width: 100px;
  float: left;
}

/* Application d'un contexte de formatage au niveau du conteneur */
#conteneur {
  overflow: hidden;
}

Pour qu'IE 6 applique pleinement ce contexte de formatage, on ajoute une feuille de style, appelée au moyen d'un commentaire conditionnel, feuille de style qui consiste à appliquer le concept de haslayout en ajoutant une règle permettant de doter l'élément du « layout » :

/* Pour qu'IE 6 applique le contexte de formatage, une déclaration de hauteur fera l'affaire */
#conteneur {
  height: 1%;
}

Ici la différence vient de la gestion du dépassement des flottants non pas hors d'un conteneur (div#global n'entre pas en jeu ici), mais par dessus un élément qui suit le flottant.

Si on ne bloque pas à un moment ou un autre le dépassement des flottants (via la propriété overflow sur un conteneur, ou clear sur un élément qui suit le flottant), un élément flottant peut passer par dessus les éléments de type bloc qui le suivent. En fait, le flottant repousse uniquement les contenus (textes, images), mais pas les limites des blocs.

Ici il y a un bug de Webkit car ce comportement engendre un chevauchement anormal. Je ne sais pas si les flottants peuvent survoler un tableau (je dirais non à priori), mais dans tous les cas le flottant ne devrait pas recouvrir le texte dans les cellules du tableau. Je penche donc pour un bug, qui est peut-être déclenché par une série de conditions dans la page (ce serait à tester, par curiosité, voire pour créer un rapport de bug).

Les solutions:

1. La plus simple mais la moins robuste, c'est de rajouter un clear:right sur le tableau (pas un clear:both).
2. Plus intéressant, tu peux créer un DIV qui va contenir à la fois div#fond-actu-images et div#intro. Ce conteneur, pour commencer, tu peux lui donner une marge à gauche de la largeur de la colonne de gauche plus l'écart voulu entre cette colonne et le contenu (mieux vaut ne pas se reposer sur la colonne de gauche pour repousser les contenus... et ça vaut aussi pour les contenus suivants). Ensuite, tu vas l'utiliser pour bloquer le dépassement des flottants, par exemple avec un overflow:hidden (voir le message de Victor). Et voilà.
Modifié par Florent V. (05 Nov 2009 - 23:29)

Florent V. a écrit :

1. La plus simple mais la moins robuste, c'est de rajouter un clear:right sur le tableau (pas un clear:both).

Pourquoi cette solution est-elle moins intéressante que la deuxième que tu proposes ?
Sinon, clear:right sur le tableau marche très bien, merci.
Modifié par Sam Soul (06 Nov 2009 - 10:05)

Sam Soul a écrit :
Pourquoi cette solution est-elle moins intéressante que la deuxième que tu proposes ?

Parce que ça ne gère pas le dépassement du flottant (ou sa mauvaise prise en compte par le navigateur). Ça gère le comportement du tableau par rapport au flottant. Et si tu gardes le flottant mais changes le contenu, sur d'autres pages du site ou à l'avenir? Tu devras à nouveau te demander quel élément accepterait un clear:right qui va bien.

Le positionnement flottant, qui est notre principal outil de positionnement à l'heure actuelle, est relativement puissant mais a des effets de bords surprenants. Il vaut mieux apprendre à les connaitre, et s'habituer aux techniques pour controler et limiter ces effets de bord dans un périmètre donné. Le meilleur outil pour ça, c'est d'englober les éléments qui doivent se présenter à un même niveau dans un DIV qui va gérer le dépassements du ou des flottant(s).

Je te remercie Florent, j'ai opté pour la deuxième solution et ça marche super bien !
Merci beaucoup !!