28220 sujets

CSS et mise en forme, CSS3

Problème de float avec firefox

J'ai un problème avec le code suivant :
Sous IE, pas de problème, mais avec Firefox, ma boite C se retrouve calé à la hauteur de la boite D au lieu d'être juste dessous ma boîte A.

(Si je supprime la boite D, l'affichage est correct.)

Merci pour votre aide,

@+

Fred

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
	* {position:relative;}
	.conteneur	{width:600px; background-color:blue;}
	
	.droite		{float:right;background-color:purple;}
	.boiteD		{border:1px solid green; margin:1px;height:350px;width:100px;}
	
	.gauche		{border: 1px solid rgb(102, 102, 102); padding: 1px; background-color: rgb(221, 221, 221);margin-right:110px;display:inline-block}
	.boiteA		{margin: 15px; padding: 0px; background-color: rgb(255, 255, 0)}
	.boiteB		{margin: 0px; float: right; width: 40%; background-color: rgb(29, 221, 221);}
	.boiteC		{margin: 20px; padding: 5px; clear:both;background-color: rgb(128, 255, 128)}
	
	.clear		{clear:both;}
</style>
</head>
<body>
<div class="conteneur">

	<div class="droite">
		<div class="boiteD">
			boite D
		</div>
	</div>
	
	<div class="gauche">
		<div class="boiteA">
		
			<div class="boiteB">
				Boîte B flottante
				float:right; width:40%; margin:10px; <i>le contenu de la boîte B déborde de A, le contenu de la boîte B déborde de A, le contenu de la boîte B déborde de A </i>
			</div>
			
			Boîte A : margin:15px;padding:5px; <i>le contenu de la boîte A entoure la boîte B...</i>
		</div>
		
		<div class="boiteC">
			Boîte C <br>clear:right;margin:20px;padding:5px; <i>le contenu de la boîte C entoure la boîte B, le contenu de la boîte C entoure la boîte B, le contenu de la boîte C entoure la boîte B</i>
		</div>
		
	</div>
	
	<div class="clear"></div>
</div>
</body>
</html>

Modifié par frederic45 (23 Dec 2005 - 09:56)
Première remarque et c'est une bonne habitude à prendre : séparer le code xhtml et les feuilles de style CSS. Ce qui permet d'avoir une plus grande clarté dans le code.

C'est vrai que là c'est pas évident à lire...
Bonsoir,

frederic45 a écrit :
J'ai un problème avec le code suivant :
Sous IE, pas de problème, mais avec Firefox, ma boite C se retrouve calé à la hauteur de la boite D au lieu d'être juste dessous ma boîte A.


C'est un bug d'IE. Voir http://test.blog-and-blues.org/haslayout/tests/float2.html : le conteneur englobant la boîte C est doté de layout par sa propriété width : le layout restreint l'action de clear à l'intérieur du conteneur. La boîte C, qui devrait être "repoussée vers le bas" par le flottant D, réagit uniquement au flottant A.

Si tu cherches à obtenir cet effet dans Firefox, il faut passer par un overflow:auto (ou hidden), un display:table-cell (ou inline-block dans les navigateurs plus conformes que FF), ou toute autre propriété créant un nouveau contexte de formatage quand elle est appliquée à ce conteneur (voir la propriété clear dans CSS2.1). Le contexte de formattage agit à la manière du layout d'IE Windows. Cela dit, il n'est pas toujours facile de trouver quelle propriété va produire ce contexte simultanément dans Firefox, Opera et Safari, sans perturber la mise en page...
Modifié par Laurent Denis (23 Dec 2005 - 04:31)
Merci pour votre aide.

J'ai mis mon code à jour.

Il fonctionne bien avec IE (en utilisant un display:table-cell) mais j'ai toujours le même problème avec Firefox.

J'ai essayé avec la propriété overflow:auto, mais dans ce cas, il me rajoute ma marge dans mon bloc gauche, sous FF.

Pffff, j'en connais un qui va revenir aux tableaux (non, pas taper ! Smiley confused
)

@+

Fred
Sujet clos
Aller à