Décalage float left et div margin-left

Bonjour,

Après avoir écumé pas mal d'articles sur le sujet, je n'ai pas trouvé de solution à mon problème, dont voici le code :

<div style="float:left;display:inline;width:255px;margin:2px;background-color:#edeff4">
<div style="float:left;display:inline;width:75px;height:75px;padding:5px;text-align:center;background-color:#fff;border:1px solid #eaeaea">image</div>
<div style="display:inline;margin-left:90px;width:165px;padding:2px">
	contenu<br />
	de ma cellule<br />
</div>
</div>

En gros, j'ai une div (elle-même en float-left incluse dans un div conteneur) qui en contient deux : une div en float left contenant une image (taille fixe) et une div contenant du texte (taille verticale variable). Pour éviter un retour du texte sous l'image j'utilise margin-left.

Problème : sous IE, la div en margin-left contenant le texte passe sous la div en float left contenant l'image (avec les autres navigateurs pas de souci, la div texte est bien à côté de la div image).

J'ai testé l'astuce du display inline sur ma div en float left, mais il semblerait qu'elle ne fonctionne pas avec une div en margin-left...

Une idée ?

Bonsoir,

Oublie tes floats et utilise display:table-cell (si les conditions te le permette du moins).

Si j'ai bien compris l'idée (ce qui m'étonnerais ), tu veux en sommes que ton texte n'épouse pas la forme de l'image ? si c'est ça un simple margin/padding left sur le div qui contient ton texte suffira non ? Sinon tu met tes deux div en display:table-cell et vertical-align: top.

Merci pour ta réponse Gili, sauf que je cherche la compatibilité avec IE...

Tout le problème est que le padding-left de ma div texte est mal interprété par IE, et que le display:table-celle l'est tout autant.

Pour ceux que ça peut intéresser, voici ma solution, qui semble fonctionner pour tous les navigateurs (FF, Safari, Chrome...) et IE8+ :

<div style="position:relative;float:left;width:255px">
<div style="float:left;width:50px;height:50px;border:1px solid #515151;margin-right:5px">image</div>
<div style="float:left;display:table-cell;width:164px">Le contenu texte qui ne passera pas sous la div image en cas de dépassement mais qui se comportera comme une cellule de tableau classique</div>
</div>				

Merci pour l'idée du display table-cell !
Si quelqu'un a une autre solution, ça m'intéresse toujours