28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous !

Je suis tombé sur un bug que je n'arrive pas à résoudre proprement :

J'ai une liste, sur 2 colonnes, avec un contenu élaboré dedans (une liste imbriquée, des images, etc...)

Chaque li de la liste principale est en float left et a un clear both à l'intérieur (car de nombreux éléments sont en float:left dedans).

Quand un élément li est plus grand que celui de droite, cela fait sauter d'un espace e li suivant (donc le li colonne gauche dessous)
cf. l'image pour expliquer globalement le comportement


Ma structure HTML (exemple d'un élément li):

<ul>
<li class="resultsgroup">
                  <h2>titre</h2>
                  <ul class="resultsgrouplist">
                    <li class="poslink">
                      <div class="infospos">
                        <div class="poslistcontent">
                          <h4>
                            <a href="">lien de page/a>
                          </h4>
                          <address>
                            mon adresse sur 2, 3, 4, ... x lignes
                            <br>
                            <span>23000 Ville</span>
                          </address>
                        </div>
                      </div>
                      <ul class="detailsposlink">
                        <li><a href="">Lien 1</a></li>
                        <li><a href="#">Lien 2</a></li>
                      </ul>
                      <div class="clear"></div>
                    </li>
                  </ul>
                


Ma structure css :


.resultsgroup {
display:block;
float:left;
margin-right:35px;
width:441px;
}

.resultsgrouplist {
list-style-type:none;
margin:0;
padding:0;
}

.poslink {
background-color:#E7DFDA;
margin:10px 0;
min-height:60px;
padding:10px;
}

.poslink .infospos {
display:block;
float:left;
margin:0;
padding:0;
width:300px;
}

.detailsposlink {
background-color:#F2EDEA;
clear:both;
float:right;
height:23px;
list-style-type:none;
margin:3px -10px -10px;
padding:0;
text-align:right;
width:292px;
}


et dedans des styles divers sur des textes avec des float left et des sizes


J'ai essayé avec un nowrap mais le souci c'est que mon adresse du coup s'affiche en une ligne et dépasse du bloc.... upload/18079-bugfloat.gif
Hello,
J'ai pas regardé en détails mais essaie de mettre "clear:left" sur les "li.resultsgroup" , tous les 2 li.
(PS: rajoutes une classe si il faut) et enleve le des "li.detailsposlink"
Clear:left annule l'effet du float que devrait subir l'élément.
Oui j'ai essayé, le souci c'est que le comportement est bizarre aussi quand les listes se comportaient bien avant.
Comme c'est en code, je ne peux pas tester chaque liste voir si elle s'affiche bien. Ce sera systématiquement une ligne sur 2