Alignement de div, problème affichage avec IE

**tofito** · 06/05/2008, 15h29

Bonjour!

Je viens demander de l'aide sur ce forum car pour une raison que je ne comprends pas, l'affichage de ma page ne se fait pas correctement sur Internet Explorer.

Vous pouvez voir la page simplifiée ici... Si vous la regardez avec Firefox, le "13" est aligné à droite du champs de saisie de texte et du libellé "Login (*) :" alors que si vous regardez cette page sous IE, le texte "13" est passé sur la ligne d'en dessous.

Toute suggestion de votre part est acceptée car ce problème commence à me prendre la tête...

Merci d'avance.

Je vous mets mon code html ci dessous:

Code html :

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
<div id="content_3">
 
	<h1>Titre</h1>
	<div class="ligne">
		<div class="ligne_partie_gauche">
			<div class="libelle_formulaires_277">
				<label for="login">Login (*) :</label>
			</div>
			<div class="champs_formulaires_277">
				<input type="text" name="login" id="login" size="39" maxlength="50"  onkeyup="test_login();"/>
			</div>
		</div>
 
		<div class="ligne_partie_droite">
			13
		</div>
 
	</div>
 
</div> <!-- fin content_3 -->

... ainsi que le css:

Code css :

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
#content_3
{
	float: left;
	width: 600px;
}
 
.ligne
{
	width: 600px;
	overflow: hidden; /* pour éviter que les floats dépassent du conteneur */
}
 
.ligne_partie_gauche
{
	float: left;
	width: 570px;
	/*overflow: hidden;*/ /* pour éviter que les floats dépassent du conteneur */
}
 
.ligne_partie_droite
{
	width: 30px;
	margin-left: 570px;
	padding-left: 5px;
}
 
.libelle_formulaires_277
{
	float: left;
	width: 277px;
}
 
.champs_formulaires_277
{
	text-align: right;
}

**Er3van** · 06/05/2008, 15h40

En version indentée, colorée, avec Doctype et dans un seul fichier pour ceux qui veulent tester :

Code HTML :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document sans nom</title>
<style type="text/css">
<!--
.#content_3
{
        float: left;
        width: 600px;
}
 
.ligne
{
        width: 600px;
        overflow: hidden; /* pour éviter que les floats dépassent du conteneur */
}
 
.ligne_partie_gauche
{
        float: left;
        width: 570px;
        /*overflow: hidden;*/ /* pour éviter que les floats dépassent du conteneur */
}
 
.ligne_partie_droite
{
        width: 30px;
        margin-left: 570px;
        padding-left: 5px;
}
 
.libelle_formulaires_277
{
        float: left;
        width: 277px;
}
 
.champs_formulaires_277
{
        text-align: right;
}
-->
</style>
</head>
 
<body>
<div id="content_3">
 
	<h1>Titre</h1>
	<div class="ligne">
		<div class="ligne_partie_gauche">
			<div class="libelle_formulaires_277">
				<label for="login">Login (*) :</label>
			</div>
			<div class="champs_formulaires_277">
				<input type="text" name="login" id="login" size="39" maxlength="50" onkeyup="test_login();"/>
			</div>
		</div>
		<div class="ligne_partie_droite">
			13
		</div>
	</div>
 
</div> 
 
</body>
</html>

**Er3van** · 06/05/2008, 15h51

Et la version qui fonctionne :

Code HTML :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document sans nom</title>
<style type="text/css">
<!--
.#content_3
{
        float: left;
        width: 606px;
}
 
.ligne
{
        width: 606px;
        overflow: hidden; /* pour éviter que les floats dépassent du conteneur */
}
 
.ligne_partie_gauche
{
        float: left;
        width: 570px;
        /*overflow: hidden;*/ /* pour éviter que les floats dépassent du conteneur */
}
 
.ligne_partie_droite
{
        width: 30px;
        padding-left: 5px;
        float : right ;
}
 
.libelle_formulaires_277
{
        float: left;
        width: 277px;
}
 
.champs_formulaires_277
{
        text-align: right;
}
-->
</style>
</head>
 
<body>
<div id="content_3">
 
	<h1>Titre</h1>
	<div class="ligne">
		<div class="ligne_partie_gauche">
			<div class="libelle_formulaires_277">
				<label for="login">Login (*) :</label>
			</div>
			<div class="champs_formulaires_277">
				<input type="text" name="login" id="login" size="39" maxlength="50" />
			</div>
		</div>
		<div class="ligne_partie_droite">
			13
		</div>
	</div>
 
</div> 
 
</body>
</html>

Ton div contenant 13 n'était pas en flottant, du coup, il passait après dans le flux, et donc à la ligne.
Il faut également retirer ton margin inutile.

Ensuite une autre erreur venait du fait que tu avais déclaré une largeur fixe à tes deux conteneurs, ligne et content_3, de 600px.
Hors, sous IE, avec le bug des div flottants il faut compter 3px de plus par div flottant, sans quoi ça dépasse et passe également à la ligne. Donc 606px ça résoud ton problème.

Il y a surement une autre méthode, et qqun viendra l'annoncer sous peu

**tofito** · 06/05/2008, 16h26

Je te remercie pour la solution et pour les explications!

Envoyé par Er3van

Et la version qui fonctionne :

Code HTML :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document sans nom</title>
<style type="text/css">
<!--
.#content_3
{
        float: left;
        width: 606px;
}
 
.ligne
{
        width: 606px;
        overflow: hidden; /* pour éviter que les floats dépassent du conteneur */
}
 
.ligne_partie_gauche
{
        float: left;
        width: 570px;
        /*overflow: hidden;*/ /* pour éviter que les floats dépassent du conteneur */
}
 
.ligne_partie_droite
{
        width: 30px;
        padding-left: 5px;
        float : right ;
}
 
.libelle_formulaires_277
{
        float: left;
        width: 277px;
}
 
.champs_formulaires_277
{
        text-align: right;
}
-->
</style>
</head>
 
<body>
<div id="content_3">
 
	<h1>Titre</h1>
	<div class="ligne">
		<div class="ligne_partie_gauche">
			<div class="libelle_formulaires_277">
				<label for="login">Login (*) :</label>
			</div>
			<div class="champs_formulaires_277">
				<input type="text" name="login" id="login" size="39" maxlength="50" />
			</div>
		</div>
		<div class="ligne_partie_droite">
			13
		</div>
	</div>
 
</div> 
 
</body>
</html>

Ton div contenant 13 n'était pas en flottant, du coup, il passait après dans le flux, et donc à la ligne.
Il faut également retirer ton margin inutile.

Ensuite une autre erreur venait du fait que tu avais déclaré une largeur fixe à tes deux conteneurs, ligne et content_3, de 600px.
Hors, sous IE, avec le bug des div flottants il faut compter 3px de plus par div flottant, sans quoi ça dépasse et passe également à la ligne. Donc 606px ça résoud ton problème.

Il y a surement une autre méthode, et qqun viendra l'annoncer sous peu

Alignement de div, problème affichage avec IE

Positionnement en CSS

Discussions similaires

Partager

Partager