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 : 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
<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 :

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)