Float qui ne float pas ! [résolu]

Bonjour,

Cela faisait un moment que je n'avais plus posté ici, mais voila, je butte sur une broutille pourtant simple en apparence !

Sur une page de mon site, je souhaiterai disposer une liste de ville sur deux colonnes.

J'ai donc naturellement mis la première moitié des villes dans une div avec un float="left", et l'autre moitié dans une autre div avec un float="right". Ben... à marche pas, et à moins que l'erreur ne soit tellement bête que je passe à coté, je comprend pas pourquoi.

<div id="2colonnesgauche">
   <ul>
      <li>Ville 1</li>
      <li>Ville 2</li>
      <li>Ville 3</li>
   </ul>
</div>
<div id="2colonnesdroite">
   <ul>
      <li>Ville 4</li>
      <li>Ville 5</li>
      <li>Ville 6</li>
   </ul>
</div>

...Avec ceci :

#2colonnesgauche {
   float: left;
   width: 350px;}

#2colonnesdroite {
   float: right;
   width: 350px;}

PS: J'ai aussi essayé d'enlever l'id 2colonnesdroite, vu que la première div est sensé faire flotter d'office la seconde, mais idem !
Modifié par ze_drix (17 Apr 2008 - 11:01)

Hello,

Je ne suis pas un grand spécialiste mais il me semble avoir lu sur ce même forum que les noms de styles ne doivent pas commencer par un chiffre.
Si je regarde ta page avec Firefox et Firebug, j'ai l'impression qu'il n'applique tout simplement pas tes styles 2colonnes*. Essaie de les renommer.

A plus...

A ben oui, c'était bien ça...

Merci beaucoup pour ta réponse (y'a des fois, j'me mettrai bien des baffes quand même )

Bonjour,

Pourquoi créer 2 listes? Il ne s'agit là que d'une seule et unique liste de villes. On devra donc avoir un marquage de type:

<ul>
	<li>Nom de ville</li>
	<li>Nom de ville</li>
	<li>Nom de ville</li>
	<li>Nom de ville</li>
</ul>

Il ne s'agit ensuite que de faire flotter un élément de liste sur deux (les impairs en l'occurrence). Pour ce faire, on peut appliquer dynamiquement une classe aux éléments qui doivent flotter ou passer par le sélecteur CSS3 :nth-child — pseudo-classe malheureusement peu supportée à l'heure actuelle.

li {list-style:none ; width:350px}
li:nth-child(even) {padding-left:350px}
li:nth-child(odd) {float:left}

By the way, attention au point soulevé précédemment à propos des identifiants débutant par un chiffre.

Cdt.,
Benjamin De Cock

Tu a très certainement raison, mais j'avoue ne pas connaître les pseudo-classe et encore moins CSS3. J'ai apparemment pas le niveau !