float et mise en page

Bonjour,
je viens vers vous car je ne trouve pas de soluce à mon pb.
pour essayer d'etre le plus clair possible , j'ai fais un dessin pour expliquer le pb.

pour ceux qui prefere le code la structure ressemble à ca:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<div id='header'></div> <div id='menu' style="float:left'></div> <div id='contenu'> /* le pb est ici je n'arrive pas trouver le bon css pour que l'affichage soit correcte, la si le texte n'est pas assez haut , l'image va recouvrir l'article suivant */ <div class='article'> <img .... style='float:left'> <p mon texte ici> </div> <div class='article'> <img .... style='float:left'> <p mon texte ici> </div>   </div> <div id='footer' style='clear:both'></div>

---

en tout ca merci d'avance de votre aide, ca doit etre un truc con comme tjrs sur les longues prises de tete mais là , je calle
j'ai essayé de mettre les articles sous forme de ul avec float encore mais c'est pire

encore merci de votre aide

Si le problème est que ton image dépasse de ton bloc dessiné en bleu, essaie d'attribuer la propriété overflow: auto; à celui-ci.

A mon avis ça vient de ton css, t'as du déclaré une taille à ton div, et elle est inférieure à celle de ta photo, qui du coup dépasse.

Si l'astuce énoncée plus haut ne marche pas, t'as juste à retirer la taille de ton div et ton image ne devrait plus dépasser.

Si ce n'est pas ça, montre nous ton css qu'on y jette un coup d'oeil.

merci à vous deux
j'ai pas donné de hauteur à mon div et la soluce de l'overflow marche parfaitement, du moins sur safari reste a vérifier sur IE

merci encore super ;)