[resolu]Clear:both; sur IE6 et Mozilla

décidément, je galère.

l'option clear:both n'est pas interprétée de la même façon sur IE6 et sur Firefox...

j'ai 3 blocs en float left (donc les uns à côté des autres) :

A B C

et les blocs suivant (D E F et G), je veux les mettre en dessous,
on obtiend donc :

A B C
D E F G

et au niveau du bloc D, je fais donc un clear:both et un float:left

et bien je n'ai pas le mêm rendu sur IE6 et firefox.

Sur IE6 ça marche parfaitement.
mais sur firefox, les bloc D E F G sont tout en bas de ma page???

je vous file mon code :

.titre_image
{
width:99px;
height:20px;
border: 1px solid #000000;
color: rgb(243,65,243);
margin-top:2px;
margin-left:1px;
text-align:center;
padding-top:3px;
float:left;
}

.titre_intitule
{
width:300px;
height:20px;
border: 1px solid #000000;
color: rgb(243,65,243);
margin-top:2px;
text-align:center;
padding-top:3px;
float:left;
}

.titre_prix
{
width:50px;
height:20px;
border: 1px solid #000000;
color: rgb(243,65,243);
margin-top:2px;
text-align:center;
padding-top:3px;
float:left;
}

.image
{
clear:both;
margin-top:9px;
margin-left:1px;
float:left;
}

.intitule
{
margin-top:9px;
margin-bottom:5px;
margin-left:3px;
width: 300px;
height: 15px;
text-align:center;
border: 1px solid #000000;
padding-bottom:2px;
float:left;
}

.resume
{
/*margin-top:5px;*/
width: 300px;
height: 64px;
border: 1px solid #000000;
float:left;
margin-left:3px;
}

.prix
{
width: 50px;
height: 39px;
border: 1px solid #000000;
float:left;
text-align:center;
color:white;
font-weight: bold ;
background-color: :#868486 ;
/*line-height:70px;*/
margin-left:3px;
padding-top:25px;
}

please, help me
Modifié par samb01 (23 Jan 2006 - 21:26)

Bonjour samb01

Et ce sujet, il est [Résolu] ?

Pour ton problème, tu aurais avantage à fournir le code HTML parce qu'avec seulement le CSS, ça va être difficile de reproduire ton problème...

c'est fait pour le resolu:

mon code xhtml, le voici :

<div class="global">
   
	<div class="leblocheader"> 
		<div class="leblocmenuheader">
			<a href="index.html">Accueil</a>:: <a href="etape1.html">Etape 1</a> :: 
			<a href="etape2.html">Etape 2</a> :: <a href="etape3.html">Etape 3</a> 
		</div>
	</div>
	
	<div class="global_menu">
	<div class="lebloctitre_menu"> 
			Titre Menu
	</div>
	<div class="leblocmenu"> 
	</div>
	</div>
	
	<div class="haut_bloc"> titre du bloc	</div>
	
	<div class="bloc"> 
			
		<div class="titre_image">
		PHOTO
		</div>  
		<div class="titre_intitule">
		TYPE
		</div>
		<div class="titre_prix">
		PRIX
		</div>
		<div class="spacer">&nbsp;</div>


		
		<div class="image">
			<img src="images/1.gif">
		</div>   
		<div class="intitule">
			<a href="etape1.html">CANON PowerShot A520</a>
		</div> 
		<div class="resume">
			Cet appareil photo, c'est un tanwich au totiton
		</div>
		<div class="prix">
			300
		</div>
		<div class="dispo">
			EN STOCK
		</div>
		                
		<div class="sepa">
                <hr/>
		</div>
	</div>


	
	
	
	</div>

et la totalité de mon css:

body
{
margin: 0;
font-family: verdana, arial, sans-serif;
font-size: 75%;
text-align:center;
}

.global
{
width: 770px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:left;
} 

.leblocheader
{
width:760px;
height:100px;
background-image: url('images/ban.gif');
border: 1px solid #000000;
}

.leblocmenuheader
{
background-image: url('images/menu_ban.gif');
width: 750px;
height: 17px;
border-top: 1px solid #000000;
padding:5px;
}

.leblocmenu
{
background-image: url('images/menu.gif');
border: 1px solid #000000;
width: 150px;
height: 356px;
}

.lebloctitre_menu
{
border-bottom: 1px solid #000000;
background-image: url('images/haut_menu.gif');
height: 15px;
margin-top:5px;
width: 142px;
padding:5px;
text-align:center;
}

.global_menu
{
float:left;
}

.bloc
{
background-image: url('images/bloc_01.gif');
width: 603px;
height: 356px;
border: 1px solid #000000;
margin-top:0px;
margin-left:155px;
}

.haut_bloc
{
background-image: url('images/haut_bloc_03.gif');
margin-top:9px;
margin-left:155px;
width: 605px;
height: 21px;
text-align:center;
border-bottom: 1px solid #000000;
}

.titre_image
{
width:99px;
height:20px;
border: 1px solid #000000;
color: rgb(243,65,243);
margin-top:2px;
margin-left:1px;
text-align:center;
padding-top:3px;
float:left;
}

.titre_intitule
{
width:300px;
height:20px;
border: 1px solid #000000;
color: rgb(243,65,243);
margin-top:2px;
text-align:center;
padding-top:3px;
float:left;
}

.titre_prix
{
width:50px;
height:20px;
border: 1px solid #000000;
color: rgb(243,65,243);
margin-top:2px;
text-align:center;
padding-top:3px;
float:left;
}

.image
{
clear:both;
margin-top:9px;
margin-left:1px;
float:left;
}

.intitule
{
margin-top:9px;
margin-bottom:5px;
margin-left:3px;
width: 300px;
height: 15px;
text-align:center;
border: 1px solid #000000;
padding-bottom:2px;
float:left;
}

.resume
{
/*margin-top:5px;*/
width: 300px;
height: 64px;
border: 1px solid #000000;
float:left;
margin-left:3px;
}

.prix
{
width: 50px;
height: 39px;
border: 1px solid #000000;
float:left;
text-align:center;
color:white;
font-weight: bold ;
background-color: :#868486 ;
/*line-height:70px;*/
margin-left:3px;
padding-top:25px;
}

.dispo
{
width: 80px;
height: 39px;
border: 1px solid #000000;
float:left;
text-align:center;
color:white;
font-weight: bold ;
background-color: :#868486 ;
/*line-height:70px;*/
margin-left:3px;
padding-top:25px;
}

.sepa
{
clear:both;
}

a:link { font-weight:bold ; color: black ;}
a:visited {color: #006600 ; }
a:hover { color: red ; text-decoration: none ; }

Salut.

As-tu essayé d'insérer un élément bloc supplémentaire (<div> ou <hr />) entre les 2 rangées à afficher, et d'appliquer à celui-ci le clear:both ?

Pour l'instant, tu appliques le clear: both à un élément flottant ... autrement dit, tu lui demandes de s'afficher en dessous de lui-même, ce qui me semble assez peu logique

bonjour,

je viens de le faire mais ça ne change rien...
j'ai retirer le clear:both de l'élément flottant.
et j'en ai mis un pour un <hr/> mais j'ai toujours le mêm problème avex fire fox.