[Résolu]Pbme de postion de container et UL

Bonsoir,

J'ai des soucis sur le positionnement de containers contenant des checkbox.
J'ai défini la longueur du container "dropper" pour qu'il puisse contenir 3 checkbox par ligne.

Cependant, lorsque j'ai un container avec un nombre de checkbox non divisible par 3 (j'ai donc la dernière ligne du container avec moins de 3 checkbox), le titre du container suivant apparait à la suite des checkbox du container précédent.

Je n'arrive pas à faire positionner ce titre sur la ligne en dessous.

Voici mon code html

<div id="dropper1" class="dropper">
	<h2>Item 1</h2>
		<UL id="menu_chk">
			<LI><label for="chk">Libelle 1</label><input type="checkbox" name="chk7" value="Libellé 1" OnClick="verifchk();" /></LI>
			<LI><label for="chk">Libelle 2</label><input type="checkbox" name="chk8" value="Libellé 2" OnClick="verifchk();" /></LI>
		</UL><!-- menu_chk -->
</div><!-- #dropper1 --> 	

<div id="dropper2" class="dropper">
	<h2>Item 2</h2>
		<UL id="menu_chk">
			<LI><label for="chk">Libelle 3</label><input type="checkbox" name="chk7" value="Libellé 3" OnClick="verifchk();" /></LI>
			<LI><label for="chk">Libelle 4</label><input type="checkbox" name="chk8" value="Libellé 4" OnClick="verifchk();" /></LI>
			<LI><label for="chk">Libelle 5</label><input type="checkbox" name="chk8" value="Libellé 5" OnClick="verifchk();" /></LI>
		</UL><!-- menu_chk -->
</div><!-- #dropper1 -->

et le CSS associé

ul#menu_chk
{
	width: 550px ;
	height: 18px ;
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

ul#menu_chk li
{
	float: left ;
	width: 180px ;
}
		
ul#menu_chk li LABEL {
	DISPLAY: inline-block; 
	PADDING-BOTTOM: 1px; 
	VERTICAL-ALIGN: 3px; 
	WIDTH: 145px; 
	TEXT-ALIGN: left;
	text-indent: 15px ;
}

avez vous une idée ?
Modifié par Babali (21 Feb 2009 - 09:59)

Bonjour,

J'ai du mal à visualiser le problème avec une description purement textuelle et pas de page en ligne pour regarder tout ça. Mais si j'ai bien compris:

1. Le comportement observé est probablement normal. Ça s'appelle le positionnement flottant, et ça marche comme ça.
2. Le retour à la ligne d'un bloc qui suit des flottants (que ce bloc soit flottant lui-même ou non) peut être forcé grâce à la propriété clear. Un clear:left bien placé peut peut-être résoudre ton problème, mais deux mises en garde: a) pas sûr que ça soit possible dans ton cas particulier et b) le comportement dans IE 6-7 peut être incohérent.
3. Il peut y avoir d'autres solutions, notamment des choses pour éviter le dépassement des flottants, mais là je dis ça un peu en l'air, n'ayant pas bien compris la configuration du machin du schmilblick. Page en ligne, pretty please?

Je ne peux pas mettre en ligne pour l'instant, mais voici une copie d'écran qui montre le fonctionnement :

Je viens de suivre ton conseil. Entre chaque container contenant les checkbox, j'ai positionné ceci :

<div style="clear:left;"></div>

Cela règle le problème sous FF etIE