[Probleme] Image en position flottante sous IE 7

Bonjour !

Ca fait un mois que je me suis initié aux css et à xhtml pour les besoins d'un stage, et je commence à récolter les fruits de mon inexperience !
En l'occurence, j'ai un probleme avec le positionnement de mes images flottantes sous IE.
Point de long discours, une démo sera plus évocatrice :

Sous firefox, pas de probleme, le texte des paragraphes se "fond" autour de l'image :



Sous IE, en revanche, seul le paragraphe qui "contient" l'image y est accolé, le reste du texte étant renvoyé en dessous :



Voici le code de la page :

CSS :

.rapproche-droit
{
	float: right;
	margin-left : 10px;
}

.rapproche-gauche
{
	float: left;
	margin-right: 10px;
}

p
{
	text-align: justify;
	font-size : 12px; 
	font-family : Arial;
	color : rgb(66,66,66);
	width: 575px;
	padding-left: 10px;
}

HTML:

<h1 class="h1-diet">Maigrir naturellement</h1>
	
	<h2 class="h2-diet">Vos objectifs</h2>
	
	<p><img src="images/maigrir-naturellement1.jpg" alt="" class="rapproche-droit" />Vous souhaitez perdre [...] poids de forme habituel.</p>
	<p>Vous vous sentez [...]depuis un certain temps.</p>
	<p>Vous avez à coeur de manger naturellement.</p>
		
	<h2 class="h2-diet">Nos solutions</h2>

	<p><img src="images/joli-manger.jpg" alt="" class="rapproche-gauche" />Un régime [...] vous sentirez mieux.</p>
	<p>Notre programme [...] et du bilan de départ.</p>

	<p><a href="prog-nutritionnel.html" class="lien-droite">En savoir plus</a></p>

C'est un code qui me semble pas vraiment compliqué, et peut-etre que c'est juste un truc tout bete à corriger ( je l'espere d'ailleurs ), mais si vous pouviez me donner un coup de main, je serais à la limite de l'euphorie ...
Modifié par Chino (03 May 2007 - 10:17)

Hello

J'aurais plutôt fait comme ça :

HTML

<div id="conteneur">

     <div id="image_droite">
     </div>

     <p>Vous souhaitez perdre [...] poids de forme habituel.</p>
     <p>Vous vous sentez [...]depuis un certain temps.</p>
     <p>Vous avez à coeur de manger naturellement.</p>

</div>

CSS

#conteneur {
text-align: justify;
font-size : 12px; 
font-family : Arial;
color : rgb(66,66,66);
width: 575px;
padding-left: 10px; }

#image_droite {
background-image:url("images/maigrir-naturellement1.jpg") no-repeat;
width:...px;
height:...px;
float:right; 
margin-left:10px; }

Je ne sais pas si ce sont tes <p> qui foirent (sans mauvais jeux de mots ) ou si c'est à cause de ton conteneur qui n'est pas défini...
Modifié par BeliG (03 May 2007 - 10:38)

Bonjour,

Tu fais une mauvaise utilisation des flottants (voir là )

Sinon pour une idée:

  <style type="text/css">
#conteneur{
width: 400px;
overflow: hidden;
}
  
.rapproche-droit{
	float: right;
	margin-left: 10px;
}

.rapproche-gauche{
	float: left;
	margin-right: 10px;
}

p{
	text-align: justify;
	font-size : 12px; 
	font-family : Arial;
	color : rgb(66,66,66);
}

.stop_float{
clear: both;
}
  </style>
</head>
<div id="conteneur">
<h1 class="h1-diet">Maigrir naturellement</h1>
	<h2 class="h2-diet">Vos objectifs</h2>
	<img src="ghost_pastag.jpg" alt="" class="rapproche-droit" /><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus cursus velit eget nunc. Quisque ante dolor, facilisis id, tincidunt non, aliquet in, mauris. Vivamus quis odio vel sapien molestie porta. Etiam sodales molestie orci. Aenean a nisi tristique risus gravida hendrerit. Fusce elementum justo id lectus. In viverra, mauris id dignissim mollis, eros est aliquet lorem, nec accumsan odio elit sit amet dolor. Fusce vehicula magna ut lectus.</p>
	<h2 class="stop_float">Nos solutions</h2>
	<img src="ghost_pastag.jpg" alt="" class="rapproche-gauche" /><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus cursus velit eget nunc. Quisque ante dolor, facilisis id, tincidunt non, aliquet in, mauris. Vivamus quis odio vel sapien molestie porta. Etiam sodales molestie orci. Aenean a nisi tristique risus gravida hendrerit. Fusce elementum justo id lectus. In viverra, mauris id dignissim mollis, eros est aliquet lorem, nec accumsan odio elit sit amet dolor. Fusce vehicula magna ut lectus.</p>
	<p><a href="prog-nutritionnel.html" class="lien-droite">En savoir plus</a></p>
</div>
</body>

Et si ça ne marche toujours pas :

HTML

<div id="conteneur">

     <div class="bloc_droit">
     </div>

     <div class="bloc_gauche">

          <p>Vous souhaitez perdre [...] poids de forme habituel.</p>
          <p>Vous vous sentez [...]depuis un certain temps.</p>
          <p>Vous avez à coeur de manger naturellement.</p>

     </div>

</div>

CSS

#conteneur {
text-align: justify;
font-size : 12px; 
font-family : Arial;
color : rgb(66,66,66);
width: 575px;
padding-left: 10px; }

.bloc_droit {
background-image:url("images/maigrir-naturellement1.jpg") no-repeat;
float:right;
width:...px;
margin-left:10px; }

.bloc_gauche {
float:left; }

Hey !

Je finis ce sur quoi je travaille et je teste vos solutions. J'indiquerai si mon probleme est réglé...

Merci pour votre aide !