Ça "float" mais pas à l'endroit voulu...

Bonjour,

Je m'en remets à vous parce que je ne trouve vraiment pas la solution à mon problème !

Sur cette page tout en bas, j'essaie de positionner dans un cadre deux listes une à gauche et une à droite :

<div id="plus">
<p>Les séquences de cinquième</p>
<hr />
<div id="plus1">
<ul>
			<li>Séquence I : <a href="../../../../lettres/sequences/cinquieme/chevalier/index.php" title="Séquence I : Le chevalier">Le chevalier (groupement de textes)</a></li>
			<li>Séquence II : Lecture cursive de <a href="../../../../sequences/cinquieme/Merlin/index.php" title="Merlin"><i>Merlin</i> d'Anne-Marie Cadot-Colin</a></li>
			<li>Séquence III : <a href="../../../../lettres/sequences/cinquieme/renart/index.php" title="Le Roman de Renart">Le Roman de Renart (groupement de textes)</a></li>
			<li>Séquence IV : <a href="../../../../lettres/sequences/cinquieme/fabliaux/index.php" title="Séquence IV : Les fabliaux">Les fabliaux (groupement de textes)</a></li>
			<li>Séquence V : <a href="../../../../lettres/sequences/cinquieme/gargantua/index.php" title="Séquence V : Le géant Gargantua">Le géant Gargantua (groupement de textes)</a></li>
			<li>Séquence VI : <a href="../../../../lettres/sequences/cinquieme/le-depart/index.php" title="Séquence VI Le départ (groupement de textes)">Le départ (groupement de textes)</a></li>
</ul>
</div>

<div id="plus2">
<ul>
			<li>Séquence I : <a href="../../../../lettres/sequences/cinquieme/chevalier/index.php" title="Séquence I : Le chevalier">Le chevalier (groupement de textes)</a></li>
			<li>Séquence II : Lecture cursive de <a href="../../../../sequences/cinquieme/Merlin/index.php" title="Merlin"><i>Merlin</i> d'Anne-Marie Cadot-Colin</a></li>
			<li>Séquence III : <a href="../../../../lettres/sequences/cinquieme/renart/index.php" title="Le Roman de Renart">Le Roman de Renart (groupement de textes)</a></li>
			<li>Séquence IV : <a href="../../../../lettres/sequences/cinquieme/fabliaux/index.php" title="Séquence IV : Les fabliaux">Les fabliaux (groupement de textes)</a></li>
			<li>Séquence V : <a href="../../../../lettres/sequences/cinquieme/gargantua/index.php" title="Séquence V : Le géant Gargantua">Le géant Gargantua (groupement de textes)</a></li>
			<li>Séquence VI : <a href="../../../../lettres/sequences/cinquieme/le-depart/index.php" title="Séquence VI Le départ (groupement de textes)">Le départ (groupement de textes)</a></li>
</ul>
</div>

</div>

#plus {width:940px;
margin: auto;
margin-top: 40px;
border: 1px solid #c7c2c2;
-webkit-border-radius: 7px;
-moz-border-radius:7px;
font-size:0.8em;
color: #c7c2c2;
}

#plus p{padding: 0px 0px 0px 25px;
color: #797777;}

#plus hr {
margin-top: 5px;
margin-bottom: 10px;
border: 0 none #c7c2c2;
border-top: 1px solid #c7c2c2;
height: 1px;	
}

#plus ul{
margin-top: 20px;
margin-bottom: 20px;
}

#plus li{list-style:none;
margin: 10px 5px 5px 5px;
color: #797777;}

#plus1{width: 420px;
float: left;}

#plus2{width: 420px;
float: right;}

Malheureusement, et pour une raison qui m'échappe, le positionnement (float) fait sortir du cadre (avec l'id "plus") mes deux listes ! En fait, ça devrait donner quelque chose comme ça, mais sur deux colonnes !

Merci d'avance pour votre aide.
Modifié par y@nn (04 Mar 2011 - 23:31)

essaie avec un:

overflow: hidden;

dans la div "plus"

Génial ! C'est ça. Merci infiniment.

Juste une question, si ce n'est pas abuser : quel est le principe de l'overflow ? Comment ça marche ?

Bonjour, justement il y a un nouvel article sur le forum qui pourra t'aider à comprendre.

Empêcher les flottants de dépasser