28221 sujets

CSS et mise en forme, CSS3

[Resolu] Alternative au "clear:both" quand bloc fixe à gauch

J'ai plusieurs blocs sur une page, et une image en float:left dans chacun d'eux.

Du coup, si le texte à droite de l'image n'est pas assez long, les blocs suivants se mettent juste à droite de l'image.

Je suppose que vous avez déjà vu ça:
upload/499-bmw1.jpg

Le truc, c'est qu'il est impossible de mettre un spacer (clear:both) en pied de chaque bloc ou entre chaque bloc, car j'ai un élément fixe à gauche de ma page et alors ils passent évidemment en dessous de celui-ci...

Alors évidemment je peux spécifier une hauteur mini au moins de la hauteur de l'image, mais comme cela ne marche pas pareil avec IE et Mozilla, je trouve ça dommage, et si j'ai un autre élément en float right qui se met en dessous du texte, ça devient difficile de prévoir une hauteur mini qui ne fasse pas "moche".

Une autre solution?
Modifié par johanna33 (17 Feb 2005 - 16:37)
Quelque chose du genre:
<p style="float: right; width: 100%;"><img src="..." style="float: left;" /><p>
<p style="float: right; width: 100%;"><img src="..." style="float: left;" /><p>
<p style="float: right; width: 100%;"><img src="..." style="float: left;" /><p>


J'avais le même problème l'autre jour et Stephan avait trouvé cette solution qui fonctionne.
J'ai aussi testé le float:right, et ça ne change rien, car il n'y a rien à droite, donc le bloc s'en fout Smiley smile

Pour ce qui est de la solution proposée par shrom...

Je comprends qu'il faut que je spécifie un width:100% à mes blocs, et effectivement ça devrait résoudre un problème, c'est-à-dire que les blocs vont bien être positionnés les uns sous les autres.

Mais cela ne résoud pas, je pense, mon problème concernant la hauteur de mes blocs qui ne contient pas mes float.

A moins qu'il me faille intégrer une image vide ou un bloc vide en float left, à la fin de mon bloc?? 

<img src="..." style="float: left;" />

Modifié par johanna33 (16 Feb 2005 - 22:52)
Pourtant, ce code marche sous IE et FF:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
</head>
<body>
<div style="float: left; width: 150px; border: 1px solid black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Phasellus varius eleifend tellus</div>
<div style="margin-left: 160px;">
<p style="float: right; width: 100%;"><img src="test.gif" style="float: left;" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Phasellus varius eleifend tellus<p>
<p style="float: right; width: 100%;"><img src="test.gif" style="float: left;" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Phasellus varius eleifend tellus<p>
<p style="float: right; width: 100%;"><img src="test.gif" style="float: left;" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Phasellus varius eleifend tellus<p>
</div>
</body>
</html>


Bloc gauche flottant, conteneur sur la droite du bloc.
Effectivement, ça marche... sans le float:right, les blocs passent en dessous le fixe gauche, et avec tout rentre dans l'ordre...

J'ai beaucoup de mal à comprendre comment le width:100% et le float:right peuvent changer à ce point les choses...

ça fait effectivement le même effet que s'il y avait un clear:both en bas de mon bloc...

bizarre bizarre, mais astuce à retenir.
Sujet clos
Aller à