28173 sujets

CSS et mise en forme, CSS3

[Résolu] Encore ces flottants...

Bonjour,

J'ai un problème avec les éléments flottants. En fait j'ai un texte de plusieurs paragraphes. Et j'ai une image à droite autour de laquelle le texte doit couler.

Ca à l'air tout simple, j'ai mis l'image en float:right. Mais j'ai sur mes paragraphes la propriété width:90% et sous IE ça fait foirer le comportement du flottement. Le texte commence seulement après l'image au lieu de commencer à gauche.

Si j'enlève ce 90%, tout va bien mais j'en ai besoin pour le reste de ma mise en page...

Je vous mets mes codes:

<body>
	<div id="main">
		<div id="image"></div>
		<p>Du texte, du texte, du texte...</p>
		<p>Un autre pagraphe...</p>
		<p>Un troisième paragraphe...</p>
	</div>
</body>

#main	{ width: 500px; margin: 0 auto; border: 1px solid #000; }

p	{ margin: 10px auto; width: 90%; }

#image	{ float:right; margin:0 0 20px 20px; width:150px; height:150px;
 		background-color:#666666; }

Modifié par <nicolas> (05 Mar 2007 - 21:46)
Bonjour,

Les marges automatiques ne sont pas nécessaires dans ce cas.
p {margin: 10px 5%;}

Et voilà.
On évite au passage l'utilisation d'une largeur fixe, qui confère le layout aux paragraphes et les empêches de se glisser sous les flottants (ou empêche les flottants de se glisser sur les paragraphes, ou... enfin je sais pas trop comment le décrire).
Voir le concept de HasLayout pour plus d'informations :
Avoir le layout - Le concept de hasLayout dans IE/Win.
Merci beaucoup.

J'ai déjà lu plusieurs fois ces explications sur le hasLayout mais j'ai toujours un peu de peine à détecter ce qui le provoque.

Et c'est vrai que j'avais pas du tout pensé aux marges en %...
Sujet clos
Aller à