Discussion :

[eric41]

Bonjour,
Sur un site, j'ai 4 cadres.



Pour 1, 2 et 3, c'est bon, mais je n'arrive pas à placer 4 correctement. Il se place en haut, sous les cadres précédents. Voici les styles appliqués aux cadres.

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
#cadre1 {
	float: left;
	width: 210px;
	padding-top: 0px;
}
#cadre2 {
	position: absolute;
	left: 10px;
	right: 10px;
	margin-left: 220px;
	margin-right: 220px;
	display: block;
	border: 1px solid #369;
	background-color: #FFF;
	padding: 5px;
}
 
#cadre3 {
	float: right;
	width: 210px;
	padding-top: 0px;
}
#cadre4 {
	margin: auto;
	color: #369;
}

[devyan]

bonjour,

il faut annuler le "float".
pour cela ajoute simplement : float:none; et clear:both; dans la définition de #cadre4.

Tu risques sans doute d'avoir encore un recouvrement avec #cadre2 que tu peux résoudre en le rendant "position:relative; float:left;" comme #cadre1

Yan.

[eric41]

Je confirme le recouvrement de 2 et 4, que j'avais déjà rencontré lors de mes essais, le cadre 4 se positionnant juste sous 3 sans tenir compte de la hauteur de 2. PAr contre, en modifiant le style de 2 comme tu me l'as indiqué, j'obtiens ceci :/

[devyan]

effectivement, il faut aussi enlever tes marges sur #cadre2 du coup (je n'avais pas vu que tu n'avais pas utilisé left)

[julied2]

Je pense que un clear both,un width et un float ferait l'affaire.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#cadre4 {
          width: 100%;
          float: left;
          clear: both;
}

[devyan]

Je pense que un clear both,un width et un float ferait l'affaire.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#cadre4 {
          width: 100%;
          float: left;
          clear: both;
}

pour le width il vaut mieux utiliser auto plutôt que 100% si tu as du padding/margin. (100% n'en tient pas compte)