[Résolu]Pb IE float avec div+image et div+texte qd height définie

Je rencontre un problème avec IE (6 et 7) sur un truc qui me semble pourtant assez bête.

J'ai une image dans un div en float right que je veux entourer d'un texte. Le texte est encapsulé dans un div auquel j'ai défini une hauteur.

A partir du moment où je définis la hauteur du div texte, le texte ne s'entoure plus autour de l'image mais il est comme décalé par une marge.

Est-ce que je fais quelque chose de travers ?

voici un test case

le code html

<div id="cadred">
	<div id="cadre-imaged"><img src="annonce-fond-droite.png" /></div>
	<div id="texte-droite"><p>Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte </p></div>	
</div>

le code css

div#cadre-imaged{
	float: right;
}
div#texte-droite{
	background-color: #E8EAEB;
	color:#000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin-top: 15px;
	margin-right: 15px;
	height: 11em;
}
div#cadred {
	float: none;
	width: 290px;
	position: absolute;
}

Modifié par leup (07 Jan 2008 - 13:14)

Bonjour,

C'est un problème de HasLayout (pour ce concept, voir la FAQ du forum).

Une solution possible à priori: placer l'image dans le bloc gris, et utiliser des marges négatives pour la décaler vers le haut et la droite.
J'ai testé rapidement, et cela semble marcher.

Nota: il faudra aussi positionner l'image en relatif pour contrer un bug dans IE6 (l'image est tronquée). On peut le faire pour IE6 uniquement via un commentaire conditionnel (là encore, voir la FAQ).

Merci de ta réponse rapide. En cherchant à droite à gauche j'étais tombé sur l'évocation du bug hasLayout mais j'étais pas encore allé voir ce que c'était, j'y vais de ce pas !