[CSS] Positionnement float, comment clearer correctement ?
Hello à tous !
Voilà j'ai un problème de mise en page CSS avec les float/clear.
Voici le HTML/CSS permettant d'illustrer le souci :
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
| <html>
<head>
<style type="text/css">
#menu {
float : left ;
width : 150px ;
border : 3px solid blue ;
}
#content {
margin-left : 200px ;
border : 3px solid red
}
#box {
float : left ;
border : 3px solid gold ;
}
.spacer { clear : both }
</style>
</head>
<body>
<div id="menu">
<p>#menu</p>
<p>#menu</p>
<p>#menu</p>
<p>#menu</p>
<p>#menu</p>
<p>#menu</p>
</div>
<div id="content">
<p>Début #content</p>
<div id="box"><p>Contenu #box</p></div>
<br class="spacer">
<p>Fin #content</p>
</div>
</body>
</html> |
Et qui donne : http://img312.imageshack.us/img312/7238/css8uq.th.jpg
Comme vous pouvez le voir, ce qui suit le br.spacer se trouve après tous les éléments positionnés en float (en l'occurence #menu et #box), et pas seulement ceux de #content comme je l'avais escompté (#box).
N'y-a-t-il pas moyen que "Fin #content" soit "collé" à #box ? Autrement dit que le br.spacer ne prenne en compte que les éléments de son niveau et non pas à ceux du niveau de dessus pour déterminer l'emplacement du texte qui suit.
Merci.
(si je ne suis pas clair dites-le moi)
