[CSS] Positionnement float, comment clearer correctement ?

**Séb.** · 02/11/2005, 15h55

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)

**SIBELIUS** · 02/11/2005, 15h59

Hello,
Effectivement, "clear" s'applique à tous les floats de la page, mais en bidouillant, on peut s'en sortir : http://www.brunildo.org/test/clear.html

**Séb.** · 02/11/2005, 16h29

Merci beaucoup Sibélius pour le lien qui résume bien ma situation.
Donc d'après ce que j'ai compris, soit je donne un overflow:auto à #content, soit je le mets en float:left. Bon cette dernière solution n'est pas applicable à mon cas précis, alors j'essaie l'autre, et effectivement quand je rajoute un overflow:auto aux règles de #content j'obtiens bien l'affichage auquel je m'attendais sous Moz, mais malheureusement pas sous IE. Cette solution n'est donc pas envisageable non plus (d'ailleurs je suis étonné qu'elle fonctionne sur Moz, je ne voyais pas du tout le overflow sous cet angle).

C'est tout de même dingue que le w3c n'ait pas prévu de réelle réciproque à float...

M'enfin, je ne suis plus étonné de rien en ce qui concerne les CSS.

**SIBELIUS** · 02/11/2005, 16h35

Envoyé par Séb.

C'est tout de même dingue que le w3c n'ait pas prévu de réelle réciproque à float...

Bah disons qu'en général, il est assez rare d'avoir à rencontrer ce problème.
Pour ma part, je n'ai jamais eu affaire à lui sur aucun des sites que j'ai fait.

Envoyé par Séb.

M'enfin, je ne suis plus étonné de rien en ce qui concerne les CSS.

Je te sens aigri. Tu veux en parler ?

Je sens que tu vas faire un procès à la mauvaise personne (CSS au-lieu des navigateurs à la traîne)

[CSS] Positionnement float, comment clearer correctement ?

Positionnement en CSS

Discussions similaires

Partager

Partager