Css float lefte???

minoula2006 -  
Defouille Messages postés 388 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
j'ai un probleme dans le css
j'ai 3 bloc different blocgauche blocmilieu et blocdroite(il sont tous dans une grande div Milieu) qui sont normalement affiché horizantalement
mon probleme cé que malgré j'ai utilisé float left mais ils sont affiché verticalement ???
voila mon code pour copmrendre mieu :
html
<div id="Milieu"><!--Debut Milieu-->
 
	 <div id="Blocgauche">
		   <div id="pt-menu"> 
			<h3>Menu</h3>
			<ul>
			  <li><a href="#">Accueil</a></li>
			  <li><a href="#">Informaion locales</a></li>
			  <li><a href="#">Féstivités</a></li>
			  <li><a href="#">Prix</a></li>
			  <li><a href="#">Mon Permis de Batir</a></li>
			</ul>
		   </div>
		
		   <div id="commune"> 
				<h3>A propos de la commune</h3>
					<div id="photo"> 
						<img src="Templates/images/photo.png" width="160" height="49" border="0" usemap="#Map8" /> 
						  <map name="Map8" id="Map8">
							<area shape="rect" coords="2,-2,158,48" href="fr/photoSousse.htm" />
						  </map>
					</div>
				
				<div id="animBrochure">
					  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload2.macromedia.com/get/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="81" height="24">
						<param name="movie" value="Templates/images/brochureFR.swf" />
						<param name="quality" value="high" />
						<embed src="Templates/images/brochureFR.swf" quality="high" pluginspage="https://get.adobe.com/flashplayer/" type="application/x-shockwave-flash" width="81" height="24"></embed></object>
				</div>
				<div id="imgBrochure">
					<img src="Templates/images/imgBrochure.gif" border="0" usemap="#Map" /> 
					  <map name="Map" id="Map">
						<area shape="rect" coords="0,1,128,205" href="fr/brochure.htm" />
					  </map>
				</div>
		  </div>
		   <div class="clear"></div>
	 </div>
	<!--corp-->
	<div id="Milieucorps">
		 <div id="corps">
			<div>Mon contenu</div>
		  </div>
		  <div class="clear"></div>
	</div>
	 <!--fin du corps-->
	<div id="Blocdroite">
		   <div id="pub">
			  <h3>Publicité</h3> 
		
			<div id="nov"> <img src="Templates/images/logo_7nov.jpg" width="115" height="165" border="0" usemap="#Map2" /> 
			  <map name="Map2" id="Map2">
				<area shape="rect" coords="1,1,116,164" href="#" />
			  </map>
			</div>
			<div id="bawaba"><img src="Templates/images/bawaba.jpg" border="0" usemap="#Map3" /> 
			  <map name="Map3" id="Map3">
				<area shape="rect" coords="-1,0,136,55" href="http://www.tunisie.gov.tn/..." />
			  </map>
			</div>
			<div id="tabac"><img src="Templates/images/tabac.gif" border="0" usemap="#Map4" /> 
			  <map name="Map4" id="Map4">
				<area shape="rect" coords="1,0,139,54" href="http://www.mdsoft-int.com/enquete-tabagisme/" />
			  </map>
			</div>
			<div id="sicad"><img src="Templates/images/SICAD.jpg" border="0" usemap="#Map5" /> 
			  <map name="Map5" id="Map5">
				<area shape="rect" coords="1,0,130,155" href="http://www.sicad.gov.tn/Fr/Accueil_46_6" />
			  </map>
			</div>
			<div id="bab"><img src="Templates/images/bab.gif" border="0" usemap="#Map6" /> 
			  <map name="Map6" id="Map6">
				<area shape="rect" coords="1,1,92,134" href="http://www.bab-el-web.com" />
			  </map>
			</div>
			<div id="meteo">  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload2.macromedia.com/get/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="84" height="75">
				  <param name="movie" value="Templates/images/meteo.swf" />
				  <param name="quality" value="high" />
				  <embed src="Templates/images/meteo.swf" quality="high" pluginspage="https://get.adobe.com/flashplayer/" type="application/x-shockwave-flash" width="84" height="75"></embed></object></div>
		   
			<div id="meteo-titre"><img src="Templates/images/meteo.png" border="0" usemap="#Map7" /> 
			  <map name="Map7" id="Map7">
				<area shape="rect" coords="1,1,81,43" href="https://www.tunisiemeteo.com/" />
			  </map>
			</div>
		   </div>
			<div class="clear"></div>
	</div>
		  <div class="clear"></div>
</div> <!--fin Milieu-->


css
#Milieu{
width:1024px;
border:1px #FFFFFF solid;
}

#Blocgauche{
width:180px;
border:1px #FFFFFF solid;
}

#pt-menu{
    float:left;
	width:180px;
	height:222px;
	background : url('images/pt-menu.png') no-repeat;
	xmargin-top:120px;
	
	padding-bottom:10px;
	 }

 #pt-menu h3{
	text-align: left;
	color:#ffffff;
	padding-top:1px;
	font-size: 10px;
	font-weight: bold;
	font-style: normal;
	font-variant: normal;
	text-indent: 10px;
 }
 
 #pt-menu li{
    line-height:20px;
	list-style-image: url('images/163.gif');
	list-style-position: inside;
	margin-left:-38px;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	white-space: pre;
  }
 
 #pt-menu li a{
	text-decoration: none;
	}
	
 #pt-menu li a:hover{
	color:#C29A3D;
	text-decoration: underline;
 }

 #commune{
	width:180px;
	height:470px;
	background:url('images/commune.png') no-repeat;
	float:left;
	xmargin-top:10px;
	xmargin-left:0px;	
}
#commune h3{
	padding-top:3px;
	padding-left:5px;
	text-align: left;
	font-weight: bold;
	font-style: normal;
	color: #FFFFFF;
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
 }


#animPerle{
padding-top:20px;
padding-left:30px;

}
#imgPerle{
padding-left:30px;
}

#animBrochure{
padding-left:30px;
padding-top:20px;
}



#Milieucorps{
width:652px;
border:1px #FFFFFF solid;
}

#corps{ 
	background : url('images/arrondiCorp.png') no-repeat;
	width: 640px;
	height: 1183px;
	float: left;
	margin-left:12px;
	xmargin:auto;
	xmargin-top:-606px;	
	xmargin-left:10px;	
}

#Blocdroite{
 width:192px;
 border:1px #FFFFFF solid;
 }

#pub{
  background:url('images/pub.png') no-repeat;
  width:180px;
  height:850px;
  float:left;
  margin-left:12px;
  xmargin-top:-605px;
  xmargin-right:5px;
}
#pub h3{
    width:180px;
	height:642px;
	color:#ffffff;
    margin-top:2px;
	padding-left:5px;
	font-size: 10px;
	font-weight: bold;
	font-style: normal;
	font-variant: normal;
}

#nov{
margin-left:30px;
margin-top:-610px;
	
}

#bawaba{
margin-left:25px;
margin-top:20px;

}

#tabac{
margin-left:25px;
margin-top:25px;

}

#sicad{
margin-left:25px;
margin-top:25px;
}
#bab{
margin-left:45px;
margin-top:25px;
}
#meteo{
margin-left:45px;
margin-top:25px;
}
#meteo-titre{
margin-left:48px;
margin-top:-5px;
}

4 réponses

minoula2006
 
alors pkoi y a pas d'aide :((((((
0
minoula2006
 
alors je pense qu'il faut chercher dans un autre forum
0
minoula2006
 
bonjour ,
meme aujourd'hui pas de réponce ????
0
Defouille Messages postés 388 Date d'inscription   Statut Membre Dernière intervention   54
 
Bonjour,

essaye en ajoutant ça :

CSS :
#Blocgauche{
	float:left;
	width:180px;
	border:1px black solid;
}

#Milieucorps{
	float:left;
	width:630px;
	border:1px black solid;
}

#Blocdroite{
	float:left;
	width:192px;
	border:1px black solid;
}



Avec les bordures, et les margins, il ne faut pas que la somme des largeurs de tes divs soit exactement égale à la largeur du div parent.

Avec -22px au div central, pour ton code ça marche, essaye d'en enlever un peu moins et vois ce que ça donne.


En espérant que ça t'ai aidé ;)
0