Bonsoir à tous,

Voici un visuel d'un rendu que j 'ai obtenu.


J'aimerai que les cadres rouges soient à coté du petit cadre jaune.

Pour ce faire j'ai fais une liste (ul + li)
Chaque li contient deux balises (un div et un p)
Les deux ont un float left.
Le p peut être sur plusieurs lignes.

Pour le moment si mon p est sur une seule ligne tout va bien mais si il passe sur deux tout pete comme sur le visuel.

Voici mon html concerner

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
				<ul id="rubriques">
					<li>
						<div></div>
						<p>rubrique 1 rubrique 1 rubrique 1</p>
					</li>
					<li>
						<div></div>
						<p>rubrique 2</p>
					</li>
					<li>
						<div></div>
						<p>rubrique 3</p>
					</li>
					<li>
						<div></div>
						<p>rubrique 4 rubrique 1 rubrique 1</p>
					</li>
					<li>
						<div></div>
						<p>rubrique 5</p>
					</li>
					<li>
						<div></div>
						<p>rubrique 6</p>
					</li>
					<li>
						<div></div>
						<p>rubrique 7</p>
					</li>
					<li>
						<div></div>
						<p>rubrique 8</p>
					</li>
					<li>
						<div></div>
						<p>rubrique 9</p>
					</li>
				</ul>
Et mon css

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
#rubriques{
	width:188px;
	margin:5px auto 0 auto;
	padding:0 0 5px 0;
	list-style:none;
}
 
#rubriques li{
	margin:0 0 6px 0;
	padding:0 0 0 5px;
	overflow:auto;
	height:2%;
}
 
#rubriques li div{
	width:18px;
	height:18px;
	border:1px solid gold;
	float:left
}
 
#rubriques li p{
	border:1px solid red;
	margin:0;
	padding:0 0 0 10px;
	float:left;
}
Comment puis-je corriger ce problème?

Merci par avance