[CSS] Décalage de contenu dans une div

Bonjour,

le problème que je vais énoncer ici se trouve sur cette page : http://paris1rugby.info/equipe.php

Le code posant problème est le suivant :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<div class="equipe"> <strong>L'équipe !</strong><br />Voici les joueurs de l'équipe universitaire 2005/2006 : <ul class="avants"> <li><a href="#">Joueur 1</a></li> <li><a href="#">Joueur 2</a></li> <li><a href="#">Joueur 3</a></li> <li><a href="#">Joueur 4</a></li> </ul>   <ul class="arrieres"> <li><a href="#">Joueur 1</a></li> <li><a href="#">Joueur 2 </a></li> <li><a href="#">Joueur 3</a></li> <li><a href="#">Joueur 4</a></li> </ul> </div>

---

Et le CSS :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

.equipe { font-size:14px; font-family:trebuchet ms; margin-left:170px; padding:10px; border: 1px solid #cccccc; background-image: url("images/backgrounds/articlenormal.jpg"); background-position:top left; background-repeat:no-repeat; margin-bottom:10px; }   .avants { position: relative; float:left;   }   .arrieres { position: relative; float:right;   }

---

J'aimerai donc que mes deux listes soient dans la DIV équipe. Hors à l'affichages elles n'y sont pas, et je ne vois pas pourquoi :(
J'ai essayé avec des span, et en position:absolute, le problème ne change pas :(
J'aimerai qu'elles soit en colonnes, une à gauche, l'autre à droite, cela fonctionne. Si j'enlève le float:right et left, les listes sont bien dans la DIV, mais plus en colonnes.

Si quelqu'un a une piste ... merci d'avance ;)

bein avec firefox ca a l'air d'aller!
je vois deux colonnes avec chacune 4 joueurs!

Salut,

Un truc dans le genre peut-être :

Code:

---

1 2 3 4 5 6 7 8

.avants { float:left; margin: 0; }   .arrieres { margin: 0 0 0 350px; }

---

Tu laisses couler le flux à gauche de .avants et tu places .arrieres dans le flux grâce à une marge.

Tu devrais d'ailleurs peut-être mettre des id plutôt que des classes si les éléments sont uniques dans ta page.

La solution de franculo_caoulene est la bonne, merci beaucoup à vous deux !
Le rugby universitaire vous remercie ;)

Bonjour,

ajoute une largeur pour chacune des listes (width:100px;)
si on met pas de largeur j'ai l'impression que la premiere liste (gauche) prend toute la place et pousse la seconde à la ligne

j'ai aussi enlevé position:relative;

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.avants { float:left; border: 1px solid #cccccc; width:100px;   }   .arrieres { float:right; border: 1px solid #cccccc; width:100px;   }

---