[résolu] Problème incompréhensible de float..

Bonjour à tous,
j'ai le nez dedans depuis quelques heures et je ne vois pas où ca coince.
Mon problème : j'ai une liste ul>li que j'etale sur deux colonnes grace à du float:left des li
en dessous il y a un h4 qui se décale, normal à cause du float,
mais quand je met un clear (br class="clear") il se positionne sous le niveau du bloc de gauche.
Comme ce n'est pas super clair, voilà l'adresse de la page posant problème :
EDIT:url supprimée pour cause de 404 (il s'agissait d'une news temporaire)
Si quelqu'un a 2 minutes pour jeter un oeil..
la feuille css avec les règles pour cette page est la 4ème "Module news", vers le milieux de la feuille.

Merci beaucoup à ceux qui tenteront de m'aider !
Modifié par bprod (21 May 2010 - 08:12)

C'est simple : il suffit de penser au contexte de formatage et à la manière d'éviter le débordement d'éléments flottants de leur conteneur. Autrement dit, ajoute ceci :

#recette ul {
  overflow: hidden;
}

Étant donné que ce sélecteur comporte déjà une largeur définie (width: 520px), l'élément conteneur est déjà doté de layout et IE 6 appliquera donc ce contexte de formatage sans broncher.

Du coup, tu peux virer le br situé après ta liste et avant ton h4 : il ne sert plus.

Jackpot !
Un grand MERCI Victor, mon sauveur

YOUPI !!!
J'avais un problème similaire et cela m'a permis de le résoudre, par contre, j'aimerai bien comprendre pourquoi parce que je suis un peu dans l'ombre...

Mon problème:
Pour mettre en forme ma liste (générée en PHP) sous forme d'un tableau à 2 colonnes j'utilise le code suivant :

<li>
  <span class="label">Title</span>
  <div>Content sur plusieurs lignes</div>
</li>

li{
  border-bottom: 1px solid #DDD;
  clear: left;
  /*overflow: hidden;*/
}
li .label{
  float: left;
}
li div{
  padding-left: 11em;
}

Le problème étant que lorsque ma DIV est vide les labels continuent bien à s'afficher les un en dessous des autres (grâce au clear: left) mais les border agissent bizarrement et viennent à se superposer par endroit.

Ajouter "overflow: hidden" sur mes LI permet d'éviter cela mais je ne comprend pas pourquoi / comment cela est interprété par le navigateur..

Merci pour votre lumière