[resolu] Probleme pour positionner 2 paragraphes dans une div

Bonjour voici mon probleme :

j'ai une div avec le style suivant :

#infoforum{
	background-color : #e0e5e0;
	border-right : solid 1px #c1ffc0;
	border-left : solid 1px #c1ffc0;
	border-top : solid 1px #c1ffc0;
	border-bottom : solid 1px #c1ffc0;
	padding-top : 5px;
	padding-left : 10px;
	padding-right : 10px;
}
.

et dedans je voudrais placer 2 paragraphes l'un a gauche et l'autre a droite dont voici le style :

.infogaucheforum{
	float : left;
	width : 300px;
	padding-top : 2px;
	padding-bottom : 2px;
}
.infodroiteforum{
	float : right;
	padding-top : 2px;
	padding-bottom : 2px;
	width : 368px;
	text-align : right;
}

voici le code html et php :

<div id="infoforum">
<p class="infogaucheforum">
Nombre de membre : <?php echo $nb_inscrit[0]; ?><br/>
Nombre de connecté : <?php echo $nb_connecte[0]; ?><br/>
Nombre de messages total : <?php echo (int) $nb_message[0] + (int) $nb_reponse[0]; ?><br/>
</p>
<p class="infodroiteforum">
<a href="rech_forum.php?act=new-mess">Afficher les derniers Messages</a><br/>
<a href="rech_forum.php?act=new-mess">Afficher vos messages</a><br/>
<a href="rech_forum.php?act=new-mess">Afficher vos discussions</a><br/>
</p>
</div>

le probleme c'est que les paragraphes sont bien l'un a droite et l'autre a gauche mais le background-color de la div principal ne descend pas jusqu'a la fin des paragraphe
Pourriez vous m'aider svp
merci d'avance
Modifié par typhanie (12 Aug 2008 - 19:25)

Hello typhanie ,

ce comportement est normal puisque le float sort les éléments du flux et plus particulièrement de leur conteneur. Pour plus d'infos voir le point de la FAQ : Comment éviter que mes éléments flottants dépassent de leur conteneur ainsi que cette page de test sur covertprestige.

Personnellement j'ai une préférence pour l'utilisation d'un overflow: hidden; sur le conteneur puisque cela évite de rajouter du code html et éventuellement un height: 1%; pour les versions d'IE inférieures à 7 via un commentaire conditionnel.

Concrètement cela donnerait :

#infoforum{
	...
	overflow: hidden;
}

et

<!--[ if lte IE 6]> /* sans espace après le premier crochet */
<style type="text/css" media="screen">
#infoforum{
	height:1%;
}
</style>
<![ endif]--> <!-- sans espace après le premier crochet -->

Il ne serait peut-être pas inutile de (re)lire Maîtriser le positionnement CSS dans toutes les situations.

A+

Merci
beaucoup pour ta réponse ca marche a merveille avec overflow : hidden;
merci encore et c'est en partie de ma faute je ne me rappelé plus qu'il y avais la foire au question j'aurais du la lire...
Bonne continuation

Tu considères que ce sujet est [Résolu] typhanie?