Mais le margin-left ne s'applique pas (sous IE en tous cas), et on dirait que même si mon texte pars bien de la droite de l'image, la boite elle est aligné à gauche de l'image ... (voir cadre rouge) C'est pas pratique parce que au final j'aimerai recréer un effet de puce dans mon texte.. (j'ai pas reussi avec des "li"
Première erreur (énorme) dans ton code : tu utilise un id sur plusieurs éléments. Un id est fait pour nommer un élément qui n'apparrait qu'une seule fois dans une page. donc tu dois utiliser des classes à la place.
Puis tu as oublié de spécifier un texte alternatif pour tes images.
Ensuite la marge est bien prise en compte, tant sur IE que sur FireFox mais comme ton image est en Float, la marge par du bord de l'écran, donc tu ne la vois pas.
Tu pourrais simplement englober tes paragraphes dans un div, lui appliquer un padding à gauche de la largeur de ton image (ou de la largeur maximal de tes images si tu n'en connais pas les dimensions à l'avance).
Ensuite tu peux mettre la marge que tu veux à tes paragraphes. Mais un conseil si c'est vraiment une liste que tu souhaites faire, oubli les <p> et fais utilise une liste à puces, c'est fait pour ça!
Voilà ton code "corrigé" :
Code:
<html> <head> <title>Essai</title>
<style type="text/css"> body { font-size: 10px; font-family: Verdana; }
img.parag { float: left; }
ul.parag { margin: 0; padding-left: 50px; /* marge intérieure du bloc égale à la largeur de l'image */ }
ul.parag li { list-style-type: none; border: solid 1px #FF0000; margin: 0 0 5px 10px; /* marges des paragraphes, dessous = 5px, gauche à 10px */ padding: 2px; /* histoire d'eviter les différences d'affichage entre navigateurs */ } </style>
Voilà quand même ce que j'aurais fait, en utilisant une liste de définition, c'est à mon avis beaucoup plus logique au niveau du balisage HTML puisque tes images et tes listes garderont ainsi un rapport logique :
Code:
<head> <title>Essai</title>
<style type="text/css"> body { font-size: 10px; font-family: Verdana; }
dl.liste { margin: 0 0 20px 0; /* marge sous la liste principale */ padding: 0; }
dl.liste dt { float: left; }
dl.liste dd { margin: 0; padding: 0 0 0 50px; /* marge intérieure gauche de la largeur de tes images */ }
dl.liste ul { margin: 0; padding: 0; }
dl.liste li { list-style-type: none; /* cache les puces */ border: solid 1px #FF0000; margin: 0 0 5px 10px; /* marges des éléments de liste, dessous = 5px, gauche à 10px */ padding: 2px; /* marges intérieures des éléments de liste */ }
Auteur 
