28220 sujets

CSS et mise en forme, CSS3

[Résolu] Float : comportement inattendu sous FF

Les floats que j'ai mis dans cette page http://afbilou.free.fr/tmp/float.html ne se positionnent pas comme je m'y attendais. C'est sous firefox (1.04) que j'ai un probleme ... sous IE tout s'affiche comme je le veux. Ce que je veux est simple : 2 colonnes dans lesquelles les elements se suivent verticalement

Sous IE : (OK)
http://afbilou.free.fr/tmp/float_ie.jpg
Et le résultat sous Firefox : (soucis)
http://afbilou.free.fr/tmp/float_ff.jpg

Voici le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
	<title>Un titre</title>

	<meta http-equiv="Content-Type"     content="application/xhtml+xml; charset=iso-8859-1" />
	<meta http-equiv="Content-Language" content="fr"                                        />

	<style type="text/css">
		body * {
			border:				1px solid black;
			text-align:			center;
			background-color:	#beb;
		}

		body {
			width:				614px;
			margin:				0 auto;
		}

		div.g {
			float:				left;
			clear:				left;
			width:				300px;

			margin-bottom:		10px;
		}

		div.d {
			float:				right;
			clear:				right;
			width:				300px;

			margin-bottom:		10px;
		}

		div#footer {
			clear:				both;
		}

	</style>
</head>

<body>

	<h1>Bug de positionnement de FF ???</h1>

	<div class="g" style="height:100px;">1er dans le flux<br />float/clear: left;</div>
	<div class="d" style="height:050px;">2e  dans le flux<br />float/clear: right;</div>
	<div class="g" style="height:150px;">3e  dans le flux<br />float/clear: left;</div>
	<div class="d" style="height:050px;">4e  dans le flux<br />float/clear: right;</div>
	<div class="g" style="height:060px;">5e  dans le flux<br />float/clear: left;</div>
	<div class="d" style="height:050px;">6e  dans le flux<br />float/clear: right;</div>

	<div id="footer">7e dans le flux<br />clear: both;</div>

</body>

</html>

Alors je saurais tres bien trouver une solution pour obtenir l'affichage que je veux mais je voudrais savoir si c'est moi qui ait mal compris un truc sur les floats ou si c'est FF qui a un soucis pour ce cas particulier.

Merci Smiley smile
Modifié par afbilou (05 Jul 2005 - 15:56)
C'est normal, tu utilises clear: left;

Le contenu de la boîte sur laquelle tu appliques la propriété et celui des boîtes suivantes ne peut donc s'écouler sur le flanc droit de la précédente boîte flottante à gauche.

Note que même en enlevant les clear, ça ne fonctionne pas.
Rendre une boîte flottante permet au contenu qui la suit de "s'écouler" sur un coté de la boîte flottante à partir de la ligne correspond au bord supérieur du flottant (marge supérieure du flottant comprise).
Modifié par Bobe (04 Jul 2005 - 22:41)
Je veux creer une serie de blocs.

A chaque bloc crée, je veux qu'il aille alternativement dans la 'colonne' de gauche puis dans la 'colonne' de droite pour le prochain etc ...

C'est pas la bonne facon de faire ?
Comme ça, le rendu est correct (à tester sous IE):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"><head>
	

	<title>Un titre</title><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1">
	<meta http-equiv="Content-Language" content="fr">

	<style type="text/css">
		body * {
			border:				1px solid black;
			text-align:			center;
			background-color:	#beb;
		}

		body {
			width:				614px;
			margin:				0 auto;
		}

		div.g {
			float:				left;
			width:				320px;

			margin-bottom:		10px;
		}

		div.d {
			
			width:				280px;
			
			margin-left: 330px;
			margin-bottom:		10px;
		}

		div#footer {
			clear:				both;
		}

	</style></head>



<body>

	<h1>Bug de positionnement de FF ???</h1>

	<div class="g" style="height: 100px;">1er dans le flux<br>float: left;</div>
	<div class="g" style="height: 50px;">2e  dans le flux<br>float: left;</div>
	<div class="g" style="height: 150px;">3e  dans le flux<br>float: left;</div>
	<div class="d" style="height: 50px;">4e  dans le flux</div>
	<div class="d" style="height: 60px;">5e  dans le flux</div>
	<div class="d" style="height: 50px;">6e  dans le flux</div>

	<div id="footer">7e dans le flux<br>clear: both;</div>

</body></html>


la "colonne" de gauche est plus large que la "colonne" de droite pour empécher le deuxième flottant de se placer à coté du premier flottant.

Les blocs de la "colonne" de droite ont une marge latérale gauche pour ne pas apparaître derrière les blocs de gauche.

Je pense que pour ton "problème", c'est la règle 5 (edit 23:29: c'est de la règle 5 que je parlais bien sùr, pas de la règle 6) qui est concernée:

http://www.yoyodesign.org/doc/w3c/css2/visuren.html#floats

"Le sommet externe d'une boîte flottante ne peut pas se trouver au-dessus d'une boîte de bloc ou flottante, générée par un élément précédent dans le document source ;"

Ici, tes flottants de droite ne peuvent apparaître au dessus du bord supérieur des flottants à gauche qui précèdent chacune d'elle dans le code source.

P.S: Tu devrais plutôt utiliser un doctype xhtml 1.0 si tu envoies ta page en text/html, ce qui est le cas ici (malgré ce que dit le meta content-type).
Modifié par Bobe (04 Jul 2005 - 23:23)
Bon et bien merci de m'avoir rappeller ces regles Smiley langue

En effet c'est la regle 5 qui s'applique ... regle que j'etais loin de me rappeller.
J'ai donc ma réponse : impossible de faire ce que je veux de cette maniere mais rassure toi je n'etais pas a cours d'idee pour arriver a ce que je veux. Je voulais juste comprendre le comportement de FF que je pensais (a tord) erroné.

Une mauvaise gestion des flottants par IE qui m'arrangeais bien sur ce coup Smiley rolleyes ...
Sujet clos
Aller à