Problème de positionnement de DIV en CSS

**eric41** · 31/10/2008, 11h31

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** · 31/10/2008, 11h46

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** · 31/10/2008, 13h54

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** · 31/10/2008, 14h58

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

**julied2** · 31/10/2008, 15h53

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** · 31/10/2008, 15h58

Envoyé par 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;
}

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

**eric41** · 31/10/2008, 19h41

Encore pire.

Je remets les styles actuels au cas où j'aurai oublié qqch.

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
#cadre1 {
	/*position: absolute;*/
	float: left;
	width: 210px;
	padding-top: 0px;
	font-family: "Trebuchet MS", Helvetica, Verdana;
	font-size: 10pt;
}
#cadre2 {
	position: relative;
	float: left;
	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;
	font-family: "Trebuchet MS", Helvetica, Verdana;
	font-size: 10pt;
}
#cadre4 {
	/*width: auto;*/
	float: none;
	clear: both;
	margin: auto;
	color: #369;
	border: 1px solid black;
}

J'ai aussi essayé la proposition de julied2.

Ne serait-il pas plus simple de faire un grand cadre englobant 1, 2 et 3, et de placer 4 en relatif ?

**HiRoN** · 31/10/2008, 19h43

Salut,
Un lien qui pourrait t'être utile en l'adaptant... (affiche la source)

**eric41** · 31/10/2008, 19h45

Merci pour ton lien Hiron, je pense effectivement que ça va me servir.

**HiRoN** · 31/10/2008, 19h57

Envoyé par eric41

Merci pour ton lien Hiron, je pense effectivement que ça va me servir.

L'avantage est ce type de structure (site 100% hauteur) :

- Si le contenu est inférieur à la hauteur de la page, le footer se place en bas de page.
- Si le contenu est supérieur, le footer descend et s'ajuste en fonction.

A modifier à ta convenance

**devyan** · 01/11/2008, 17h27

Envoyé par eric41

Encore pire.

Je remets les styles actuels au cas où j'aurai oublié qqch.

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
#cadre1 {
	/*position: absolute;*/
	float: left;
	width: 210px;
	padding-top: 0px;
	font-family: "Trebuchet MS", Helvetica, Verdana;
	font-size: 10pt;
}
#cadre2 {
	position: relative;
	float: left;
	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;
	font-family: "Trebuchet MS", Helvetica, Verdana;
	font-size: 10pt;
}
#cadre4 {
	/*width: auto;*/
	float: none;
	clear: both;
	margin: auto;
	color: #369;
	border: 1px solid black;
}

J'ai aussi essayé la proposition de julied2.

Ne serait-il pas plus simple de faire un grand cadre englobant 1, 2 et 3, et de placer 4 en relatif ?

Pour moi il n'y a pas de problème avec cette CSS...

Peut être que le soucis vient du html. Attention avec les éléments "Float".
il est préférable de les placer avant le contenu "fixe" (ici cadre2).

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="cadre1">	Praesent facilisis. Nam quis elit. Cras nisl nisl, laoreet quis, iaculis vitae, condimentum ut, nisi. 
	Donec dolor sapien, rhoncus quis; placerat lobortis, tempor vitae, risus. 
	Pellentesque at diam non purus ornare scelerisque. Aliquam quis mi.
</div><div id="cadre3">	Praesent facilisis. Nam quis elit. Cras nisl nisl, laoreet quis, iaculis vitae, condimentum ut, nisi. 
	Donec dolor sapien, rhoncus quis; placerat lobortis, tempor vitae, risus. 
	Pellentesque at diam non purus ornare scelerisque. Aliquam quis mi.
</div><div id="cadre2">	Praesent facilisis. Nam quis elit. Cras nisl nisl, laoreet quis, iaculis vitae, condimentum ut, nisi. 
	Donec dolor sapien, rhoncus quis; placerat lobortis, tempor vitae, risus. 
	Pellentesque at diam non purus ornare scelerisque. Aliquam quis mi.
</div><div id="cadre4">	Praesent facilisis. Nam quis elit. Cras nisl nisl, laoreet quis, iaculis vitae, condimentum ut, nisi. 
	Donec dolor sapien, rhoncus quis; placerat lobortis, tempor vitae, risus. 
	Pellentesque at diam non purus ornare scelerisque. Aliquam quis mi.
</div>

**HiRoN** · 01/11/2008, 19h07

Peut être que le soucis vient du html.

Tu ne proposes à aucun moment un DocType.

**devyan** · 01/11/2008, 23h06

Envoyé par HiRoN

Tu ne proposes à aucun moment un DocType.

Exact. Je n'y ai pas pensé (son code ne nous ayant pas été fourni).

Je met personnellement systématiquement un DocType...

Et effectivement sans ça fonctionnem moins bien

**eric41** · 05/11/2008, 12h22

J'utilise un doctype XHTML Transitional.

**Bisûnûrs** · 05/11/2008, 12h31

Quelque chose comme ça :

Code html :

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

1
2
3
4
5
6
7
8
9
<div style="overflow:hidden;background:red">
   <div style="width:210px;float:left;background:green">Cadre 1</div>
 
   <div style="width:210px;float:right;background:blue">Cadre 3</div>
 
   <div style="overflow:hidden;background:yellow;height:500px">Cadre 2</div>
</div>
 
<div style="background:purple">Cadre 4</div>

T'as le droit d'enlever le height sur le cadre 2.

Problème de positionnement de DIV en CSS

Positionnement en CSS

Discussions similaires

Partager

Partager