[css] utilisation d'un flottant à gauche et d'un flottant à droite en même temps

**tofito** · 06/05/2008, 19h01

Bonjour,

Je cherche à mettre 3 éléments sur une même ligne, c'est pourquoi j'ai mis celui de gauche en flottant à gauche et celui de droite en flottant à droite, le dernier étant normal... le tout dans un div contenant les 3 premiers...

Pour une raison que je ne comprends pas, le 3ème élément ne s'affiche pas correctement sous Firefox (tandis que sous IE cela semble marcher correctement) et au lieu de se situer à la même hauteur que les 2 autres blocs est affiché un peu en dessous.

Si quelqu'un a une piste je lui en saurais gré...

Vous pouvez voir le résultat ici

et le code 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
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
 
<!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">
<!--
 
body
{
        width: 1000px;
        margin: 0;
        padding: 0;
        font: small/1.6em verdana, sans-serif;
        color: #444444; 
        background: #ffffff;
}
 
#content_1
{
        width: 1000px;
        padding-top: 10px;
        overflow: hidden; /* pour éviter que les floats dépassent du conteneur (quand taille de #menu_2 > taille de #content_2) */
}
 
#menu_2
{
        float: left;
        width: 160px;
        padding-left: 20px;
        padding-right: 20px;
}
 
#content_2
{
        width: 800px;
        overflow: hidden; /* pour éviter que les floats dépassent du conteneur (quand taille de #content_3 > taille de #menu_droite_3) */
}
 
#content_3
{
        float: left;
        width: 600px;
}
 
#menu_droite_3
{
        width: 190px;
        padding-left: 10px;
        margin-left: 600px;
}
 
.ligne
{
        width: 560px;
        overflow: hidden; /* pour éviter que les floats dépassent du conteneur */
}
 
h1
{
        font: medium/1.6em verdana, sans-serif;
        font-weight: bold;
        padding-bottom: 10px;
}
 
h2
{
        font: small/1.6em verdana, sans-serif;
        font-weight: bold;
}
 
.h3_gauche
{
        float: left;
        width: 20px;
        text-align: center;
}
 
.h3_droite
{
        float: right;
        text-align: right;
}
 
h3
{
        width: 425px;
        font: small/1.6em verdana, sans-serif;
}
        
-->
</style>
</head>
 
<body>
 
<div id="content_1">	
 
	<div id="menu_2">
		menu 1<br />
		menu 2</a>	
	</div>
 
	<div id="content_2">
 
		<div id="content_3">
 
			<h1>Titre</h1>
 
			<div class="ligne">
				<div class="h3_gauche">
					•
				</div>
				<div class="h3_droite">
					[Editer]
				</div>
				<h3>
					Element 1
				</h3>
			</div>
 
			<div class="ligne">
				<div class="h3_gauche">
					•
				</div>
				<div class="h3_droite">
					[Editer]
				</div>
				<h3>
					Element 2
				</h3>
			</div>
 
		</div> <!-- fin content_3 -->
 
		<div id="menu_droite_3">
			menu de droite
		</div> <!-- fin menu_droite_3 -->
 
	</div> <!-- fin content_2 -->
</div> <!-- fin content_1 -->
 
</body>
</html>

Merci

**hellspawn_ludo** · 10/05/2008, 01h22

Bonjour tofito,

Si j'ai bien compris, tu te demandes pourquoi "Elément 1" et "Elément 2" ne sont pas alignés en façe des points ?

C'est tout simplement dû aux marges de h3 qui devrait être à 0px.

Dans ton css, sur le h3, rajoute ceci :

Code :

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

1
2
3
4
5
h3   {  margin:0px;
        width: 425px;
        font: small/1.6em verdana, sans-serif;
     }

Maintenant, ça fonctionne aussi sur le navigateur Opéra.

Bye.

[css] utilisation d'un flottant à gauche et d'un flottant à droite en même temps

CSS

Discussions similaires

Partager

Partager