margin auto : decalage du conteneur vers la gauche lié selon longueur de page

**helenegu** · 25/03/2009, 17h13

Bonjour à tous,
Oui les problèmes de centrage horizontal ont été traités en long en large et en travers un peu partout mais, je n'ai pas réussi à trouver l'explication de ce problème là, je m'explique :
J'ai un bloc conteneur centré grâce à la propriété "margin: 0 auto" (et un body en "text-align: center" pour que ça passe aussi sous IE)
puis deux blocs : "droite" (le menu dont la hauteur de varie pas) et "gauche" (le contenu de hauteur variable), tous deux sont positionnés en "float" (j'ai aussi essayé de positionner le menu avec absolute mais ça ne change rien)
Le problème est que, sur certaines pages qui sont plus longues que d'autres, le bloc conteneur se décale de quelques pixels vers la gauche sous FF, safari, chrome... du coup quand on passe d'une page à l'autre, ça fait pas propre

Un idée de ce qui peut provoque ce décalage ?
La feuille de style :

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
 
body{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 0.75em;
	color: #333333;
	padding: 0;
	margin: 0;
	text-align: center;
	}
a:link{ 
	text-decoration: none; 
	color: #333333;
	}
a:visited { 
	text-decoration: none; 
	color: #333333;
	}
a:hover { 
	text-decoration: none; 
	color: #FF0000;
	}
a:active { 
	text-decoration: none; 
	color: #FF0000;
	}
img {
	border: none;
	margin: 0;
	padding: 0;
	}
#conteneur{
	width: 610px;
	padding: 10px 0 0 0;
	margin: 0 auto;
	}
#gauche{
	float: left;
	width: 400px;
	padding: 0;
	margin: 0;
	text-align: left;
	}
#droite{
	float: right;
	width: 110px;
	padding: 0;
	margin: 0;
	text-align: left;
	}
#header{
	padding: 20px 0 30px 0;
	}
#header p{
	color: #FF0000;
	font-size: 0.9em;
	text-align: center;
	}
.texte{
	display: block;
	text-align: left;
	padding: 0;
	margin: 0 0 30px 0;
	line-height:1.3em;
	}
.titre{font-weight: bold; font-size: 1.4em;  }
.texte img{border: 1px solid #333333; padding: 0; margin: 10px 0 0 0; }/*width image 394*/
#droite ul{padding-top: 50px;}
#droite li{line-height: 30px;	list-style: none;}
.lettrine2{
	font-size: 1.4em;
	color: #FF0000;
	}
.rouge{color: #FF0000;}
.bonus a:link{text-decoration: none; color: #FFFFFF;}
.bonus a:visited{text-decoration: none; color: #FFFFFF;}
.bonus a:hover{text-decoration: none; color: #FF0000;}
.bonus a:active{text-decoration: none; color: #FF0000;}
 
/* FORMULAIRE CONTACT*/
form{padding: 0; margin: 0; }
form label{display: inline; float: left; width: 70px;}
form input{ font-family: Georgia, "Times New Roman", Times, serif; border: #CCC 1px solid; margin-bottom: 5px;}
textarea{float: left; font-family: Georgia, "Times New Roman", Times, serif; font-size: 1em;  border: #CCC 1px solid; margin-bottom: 5px;}
form fieldset{border: none;}
form input[type="submit"]
{float: right;	margin-top: 5px; font-size:0.9em; border: #CCC 1px solid;}
.erreur{color: #FF0000;}