Placement en float incorrect

**marcito** · 23/01/2009, 15h26

Salut a tous,

j'ai un probleme avec firefox, je pense (voir je suis sur que c'est avec le float) mais j'ai cherché dans le forum, je n'ai pas reussi a résoudre mon probleme.
La colonne du mileu s'affiche en bas celle de gauche (uniquement sur firefox)
quelqu'un peut il m'aider???

voila mon code html :

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
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
 
 
<body>
<div id="wrap">
 
	<div id="top"></div>
 
		<div id="content">
 
			<div class="header">
				<h1><a href="index.html">NOM DE LA SOCIETE</a></h1>
				<h2>Disponible 7/7j (slogan, accroche)</h2>
			</div>
 
			<div class="breadcrumbs">
				<a href="index.html">accueil</a> &middot; <a href="mentions.html">mentions l&eacute;gales&nbsp;</a>
			</div>
 
			<div class="left">
					<div class="text">	
						<h2>Adresse</h2>		
						21, Bd du Chateau <br/>
						94500 Champigny sur Marne<br/>
						<a href="plan.html">Voir sur un plan</a><br/>
						<a href="satellite.html"> Voir limage satellite</a><br/>
 
					</div>
						<br/>
					<div class="text">		
						<h2>Coordonn&eacute;es</h2>
						Tel : 01 48 80  <br/>
						Fax : 01 48 80 <br/>
						Mobile : 06.22.74.17.53<br/>
						<a href="contact.php">Envoyer un mail</a><br/>
						<a href="contact.php">Demander devis/renseignement</a><br/>
					</div>
						<br/>
					<div class="text">		
						<h2>Horaires</h2>
						Du lundi au dimanche y compris les jours f&eacute;ri&eacute;s 24h/24 
						<br/>
					</div>
						<br/>
					<div class="text">
						<h2>M&eacute;t&eacute;o</h2>
						<center>
							<embed width="150" height="200" wmode="transparent" type="application/x-shockwave-flash" 
							src="http://weather.eu.msn.com/f5/loaderSpotw18.swf?mode=spotweather&lang=FR&city=FRm_a1_c6">
							</embed> 
						</center>
					</div>
					<div class="text">
						<h2>Publicit&eacute;</h2>
						<br/>
 
					</div>						
			</div>
 
 
			<div class="middle">
 
				<div class="photo">
 
				</div>
					<br />
 
				<div class="text">			
					<h2>Pr&eacute;sentation </h2>
 
 
					Artisans de
					p&egrave;re en fils, nous mettons nos comp&eacute;tences et
					notre savoir-faire &agrave; votre service. Nous vous accueillons
					dans nos ateliers : Paris 11&egrave;me, Paris 19&egrave;me,
					Verri&egrave;re le Buisson (91370), le Valois Perret (92300), et
					Nogent sur Marne (94130). Nous vous garantissons un travail
					soign&eacute; et de qualit&eacute;. N'h&eacute;sitez pas
					&agrave; nous contacter.
 
				</div>
					<br />
 
				<div class="activite">			
					<h2>Activit&eacute;s</h2>
					<ul>
					  <li>d&eacute;pannage de serrurerie </li>
					  <li>plomberie </li>
					  <li>travaux d'assainissement </li>
					  <li>d&eacute;pannages urgents &agrave; domicile </li>
					  <li>pose de vitrerie </li>
					  <li>vidange, curage </li>
					</ul>
 
				</div>
					<br/>
				<div class="text">			
					<h2>Produits et services</h2>
 
					Assainissement : <br />
					<ul>
					  <li>Graisse </li>
					  <li>Eaux us&eacute;es </li>
					  <li>Tout d&eacute;chet </li>
					  <li>Vidange/nettoyage bacs &agrave; graisse </li>
					</ul>
				 </div>
				<div class="text">			
					<h2>Agr&eacute;ment et label</h2>
					<ul>
					  <li>Agr&eacute;ment </li>
					  <li>Label </li>
					</ul>
				</div>		
 
				 <div class="text">			
					<h2>Moyens de paiement</h2>
					<ul>
					  <li>Ch&egrave;ques bancaires </li>
					  <li>Carte Bleue </li>
					</ul>
				 </div>	
 
 
 
			</div>
 
 
			<div id="clear"></div>
 
			</div>
 
<div id="bottom"></div>
 
</div>
 
</body>
</html>

et mon code CSS

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
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
* {
    padding: 0;
    margin: 0;
} 
 
body {
    background: #fff;
	font: .74em "Trebuchet MS" Verdana, Arial, sans-serif;
	line-height: 1.5em; 
}
a {
	color: #3B6EBF;
	text-decoration: none;
}
 
a:hover {
	color: #083479;
}
 
 
#wrap {
margin: 20px auto;
width: 724px;
background: #fff url('images/midbg.jpg');
background-repeat: repeat-y;
}
 
#top { 
background: #fff url('images/topbg.jpg');
height: 30px;
}
 
#content {
padding: 0 40px 0 40px;
}
 
#bottom {
 
background: #fff url('images/botbg.jpg');
height: 30px;
}
 
 
.header {
height: 100px;
background: #85ACF7 url('images/hidr.jpg');
}
 
.header h1 { padding-left: 17px; padding-top: 22px; font-size: 22px; color: #FFF; }
.header h1 a { font-size: 40px; color: #FFF; text-decoration: none;}
.header h2 { padding-left: 17px; padding-top: 10px; font-size: 17px; color: #FFF; }
 
.breadcrumbs { 
    background: #d2e3ef; 
	border-bottom: 1px solid #E1E1E1; 
	font-weight: bold;
	font-variant: small-caps;
	padding: 5px;
 
	}
 
 
.middle {
	float: left;
	width: 59%;
	margin: 0 30px;
	padding: 2% 1%;
	text-align: justify;
}
.middle ul {
	padding: 0px 0 15px 20px;
	margin:0;
}
.photo {
	background: #d2e3ef; 
   	text-align : center;
 
	}
.text {
 
	background: #d2e3ef; 
	font-weight: bold;
	padding: 0px 0px 8px 10px;
 
	}
.activite {
 
	background: #d2e3ef; 
	font-weight: bold;
	}	
.left {
 
	float: left;
	width: 35%;
	margin: 0 0px;
	padding: 0% 0%;
 
}
 
.left ul {
	padding: 20px 0 15px 20px;
	margin:0;
}
 
.left li {
	margin-bottom:5px;
	list-style-type: square;
	color: #3B6EBF;
}
 
.middle h2 { color: #3B6EBF; font-size: 16px; margin-bottom: 10px; margin-top: 10px;}
.left h2 { color: #3B6EBF; font-size: 14px; margin-top: 15px;}
 
 
#clear {
	display: block;
	clear: both;
	width: 100%;
	height:1px;
	overflow:hidden;
}
 
#footer {
	text-align: center;
	color: #666;
}

**desert** · 23/01/2009, 16h43

Rapide calcul :
Ton div wrap qui englobe le tout fait 724px de largeur.
A l'intérieur, ton div de gauche fait 59% de 724px (~427px) + margin gauche et droit de 30px (60px) + padding gauche et droit de 1% (~14px).
Ton div du milieu, quant à lui, fait une largeur de 35% (~253px).
Résultat : 427+60+14+253 = ~754px au lieu des 724 de départ.

**marcito** · 23/01/2009, 17h08

un grand merci

mais j'ai vraiment l'air ridicule

Placement en float incorrect

Positionnement en CSS

Discussions similaires

Partager

Partager