Probleme de construction css
Bonsoir à tous,
Voici un visuel d'un rendu que j 'ai obtenu.
http://img135.imageshack.us/img135/3152/testey1.th.jpg
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:
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:
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
