Perdu dans les float

**Equinoxe5** · 05/10/2007, 13h13

Bonjour,
J'avoue que je me noie dans peu de float....

Ma page d'accueil est composée de 10 blocs.
4 en haut, 2 qui doivent s'afficher sous ces 4 et enfin 4 en bas qui doivent s'afficher sous les 2 du milieu.
Chaque rangée de blocs a la même hauteur. Mais sous IE6 ou Opera par exemple, l'affichage diffère. Soit un bloc part dessous ou alors je me retrouve avec 5 blocs dans la rangée de 4.
Qui peut me dire quels sont les paramètres float à rajouter dans chaque DIV ?
Merci d'avance

**Candygirl** · 05/10/2007, 14h01

Hello,
Il serait plus facile de te répondre avec le bout de code (html+css) qui pose problème

**BnA** · 05/10/2007, 14h03

Exact!

**Equinoxe5** · 05/10/2007, 14h20

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
div#contacts {
float: left;
border-style:solid; 
border-width:1px; 
border-color:#EEE;
width:142px;
height:165px;
float: left;
margin-top: 5px;
margin-bottom: 1px;
margin-right: 18px;
}

div#clmatch {
float: left;
border-style:solid; 
border-width:1px; 
border-color:#EEE;
width:358px;
height:165px;
color: #333333;
margin-top: 5px;
margin-bottom: 1px;
margin-left: 1px;
}

div#dsnews {
float: left;
border-style:solid; 
border-width:1px; 
border-color:#EEE;
width:250px;
height:165px;
color: #333333;
margin-top: 5px;
margin-bottom: 1px;
margin-left: 1px;
}

div#photos {
float: left;
border-style:solid; 
border-width:1px; 
border-color:#EEE;
width:182px;
height:165px;
color: #333333;
margin-top: 5px;
margin-bottom: 1px;
margin-left: 1px; 
}

div#ephemeride {
float: left;
border-style:solid; 
border-width:1px; 
border-color:#EEE;
width:503px;
height:180px;
color: #333333;
margin-top: 0px;
margin-bottom: 1px;
}

div#lastpost {
float: left;
border-style:solid; 
border-width:1px; 
border-color:#EEE;
width:453px;
height:180px;
color: #333333;
margin-top: 0px;
margin-bottom: 1px;
margin-left: 1px; 
}

div#menu1 {
clear: both;
float: left;border-style:solid; 
border-width:1px; 
border-color:#EEE;
width:142px;
height:500px;
margin-top: 0px;
margin-bottom: 5px;
margin-right: 18px;
}

div#menu2 {
float: left;
border-style:solid; 
border-width:1px; 
border-color:#EEE;
width:340px;
height:500px;
color: #333333;
margin-top: 0px;
margin-bottom: 5px;
margin-left: 1px;
}

div#menu3 {
float: left;
border-style:solid; 
border-width:1px; 
border-color:#EEE;
width:290px;
height:500px;
color: #333333;
margin-top: 0px;
margin-bottom: 5px;
margin-left: 1px;
margin-right: 18px;
}

div#menu4 {
float: left;
border-style:solid; 
border-width:1px; 
border-color:#EEE;
width:142px;
height:500px;
color: #333333;
margin-top: 0px;
margin-bottom: 5px;
margin-left: 1px;
}

et le code HTML

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<DIV id="contacts">
    <H1>Les contacts</H1>
    <DIV>
      <A href="contact/president.php" class="bt_gris">Le mot du Président</A>
    </DIV>
    <DIV>
      <A href="contact/index.php" class="bt_gris">Ecrire au Bureau</A>
    </DIV>
    <DIV>
      <A href="messagerie/index.php" class="bt_gris">Messagerie interne</A>
    </DIV>
    <DIV>
      <A href="cartes_p/index.php" class="bt_gris">Cartes postales</A>
    </DIV>
    <HR>
    <DIV>
      <A href="membres/membres.htm" class="bt_gris">Accès membres</A>
    </DIV>
  </DIV>
  <DIV id="clmatch">
    <H1>Les rencontres de la semaine</H1>
    <IFRAME src="matchs/cl_matchwe.php" width="100%" height="140" marginwidth="5" marginheight="1" frameborder="0">
    </IFRAME>
  </DIV>
  <DIV id="dsnews">
    <H1>Les infos du volley</H1>
    <IFRAME src="dsnews/index_titles.php" width="100%" height="140" marginwidth="1" marginheight="1" frameborder="0">
    </IFRAME>
  </DIV>
  <DIV id="photos">
    <H1>Les photos</H1>
    <a href="igalerie/"><img src="igalerie/hasard.php" border="0" alt="Cliquez pour aller à la galerie" /></a>
  </DIV>
  <DIV id="ephemeride">
    <H1>Ephéméride du jour</H1>
    <IFRAME src="matchs/an_index.php" width="98%" height="140" marginwidth="0" frameborder="0">
    </IFRAME>
  </DIV>
  <DIV id="lastpost">
    <H1>Les derniers messages dans les forums</H1>
    <IFRAME src="coolforum/cf_last_posts.php") width="98%" height="140" marginwidth="0" marginheight="0" frameborder="0">
    </IFRAME>
  </DIV>
  <DIV id="menu1">
    <H1>Rencontres</H1>
    <DIV>
      <A href="matchs/re_resultatswe.php" class="bt_gris">Derniers r&eacute;sultats</A>
    </DIV>
    <DIV>
      <A href="matchs/cl_cal.php" class="bt_gris">Calendrier</A>
    </DIV>
    <DIV>
      <A href="matchs/ch_changementsalle.php" class="bt_gris">Chang. de salle</A>
    </DIV>
    <DIV>
      <A href="divers/entrainement.php" class="bt_gris">Entrainements</A>
    </DIV>
    <DIV>
      <H1>Les équipes</H1>
    </DIV>
    <DIV>
      <A href="equipes/equipe2008.php" class="bt_rouge">Benjamines</A>
    </DIV>
    <DIV>
      <A href="equipes/equipe2008.php" class="bt_rouge">Minimes</A>
    </DIV>
    <DIV>
      <A href="equipes/equipe2008.php" class="bt_rouge">Cadettes</A>
    </DIV>
    <DIV>
      <A href="equipes/equipe2008.php" class="bt_rouge">Juniors</A>
    </DIV>
    <DIV>
      <A href="equipes/equipe2008.php" class="bt_rouge">Séniors D1</A>
    </DIV>
    <DIV>
      <A href="equipes/sfr12008.php" class="bt_rouge">Séniors R1</A>
    </DIV>
    <HR>
    <DIV>
      <A href="equipes/equipe2008.php" class="bt_bleu">Benjamins</A>
    </DIV>
    <DIV>
      <A href="equipes/equipe2008.php" class="bt_bleu">Minimes</A>
    </DIV>
    <DIV>
      <A href="equipes/equipe2008.php" class="bt_bleu">Cadets</A>
    </DIV>
    <DIV>
      <A href="equipes/equipe2008.php" class="bt_bleu">Juniors</A>
    </DIV>
    <DIV>
      <A href="equipes/equipe2008.php" class="bt_bleu">Séniors D1</A>
    </DIV>
    <DIV>
      <A href="equipes/shr32008.php" class="bt_bleu">Séniors R3</A>
    </DIV>
    <HR>
    <DIV>
      <A href="equipes/equipe2008.php" class="bt_vert">Loisirs jeux</A>
    </DIV>
    <DIV>
      <A href="equipes/equipe2008.php" class="bt_vert">Loisirs comp.</A>
    </DIV>
  </div>
  <DIV id="menu2">
    <IFRAME src="infos2/info.php" width="100%" height="300" marginwidth="6" marginheight="5" frameborder="0">
    </IFRAME>
    <IFRAME src="libchart/graphique_resultats.php" width="100%" height="200" marginwidth="0" marginheight="0" frameborder="0">
    </IFRAME>
  </div>
  <DIV id="menu3">
    <center class="texte10">      Cliquez sur une image pour aller à sa page
    </center>
    <IFRAME src="slideshow/slideshow.htm" width="290" height="240" marginwidth="5" marginheight="5" frameborder="0">
    </IFRAME>
  </div>
  <DIV id="menu4">
    <H1>Dialoguer</H1>
    <DIV>
      <A HREF="coolforum/index.php" class="bt_gris">Les forums</A>
    </DIV>
    <DIV>
      <A HREF="alitalk/index.php" class="bt_gris">Le chat</A>
    </DIV>
    <H1>Le volley</H1>
    <DIV>
      <A HREF="divers/histoire.php" class="bt_gris">Histoire du volley</A>
    </DIV>
    <DIV>
      <A HREF="divers/equipe_de_france.php" class="bt_gris">Equipe de France</A>
    </DIV>
    <DIV>
      <A HREF="divers/class-fivb_f.php" class="bt_gris">Clas. FIVB F</A>
    </DIV>
    <DIV>
      <A HREF="divers/class-fivb_h.php" class="bt_gris">Clas. FIVB H</A>
    </DIV>
    <DIV>
      <A HREF="divers/chiffres.php" class="bt_gris">Quelques chiffres</A>
    </DIV>
    <H1>Utile / Divers</H1>
    <DIV>
      <A HREF="download/index.php" class="bt_gris">Téléchargement</A>
    </DIV>
    <DIV>
      <A HREF="divers/organigramme.php" class="bt_gris">Organigramme</A>
    </DIV>
    <DIV>
      <A HREF="infos2/maj/form.php" class="bt_gris">MAJ infos</A>
    </DIV>
    <DIV>
      <A HREF="divers/popup-outils.php" class="bt_gris">Outils</A>
    </DIV>
    <DIV>
      <A HREF="votesite/index.php" class="bt_gris">Autres sites</A>
    </DIV>
    <H1>Jeux</H1>
    <DIV>
      <A HREF="PhpLeague0.82/prono/index.php" class="bt_gris">Loto sportif L1</A>
    </DIV>
    <DIV>
      <A HREF="qz_asmb/index.php" class="bt_gris">Multi quizz</A>
    </DIV>

Actuellement, avec ce code ça fonctionne mais je ne comprends où j'ai écrit en rouge, suis-je autorisé à mettre le float et le clear dans le même bloc ?

Autre chose, si je redimensionne mon écran en largeur, au lieu d'avoir un ascenseur horizontal, les blocs en trop passent dessous, comment ça se fait ?
Merci de votre aide en tout cas

Perdu dans les float

CSS

Vue hybride

Discussions similaires

Partager

Partager