<p> qui ne passe pas sous une image

Bonjour à tous,

je débute dans l'utilisation des CSS pour la mise en page de mes sites, j'essaye donc d'avancer doucement mais en faisant gaffe de faire comme il faut.

Je tombe sur un os. Sur ma page, j'ai une "ligne" avec un <ul> en float: right et une image en float:left, cela prends donc toute la largeur.
En dessous je place un <p>, celui-ci se colle directement en dessous du <ul> (normal) mais quand je regarde avec Firebug je m'apperçois que les marges du dessus chevauchent mon menu <ul>, pour moi quelques chose ne va pas !

Pourriez-vous me dire comment j'aurais du construire cela ?

Voici une url où l'on peut voir le résultat :

http://www.gianonatti.com/enconstruction/

merci de votre aide

Bonjour,

C'est un comportement normal, en application du positionnement flottant comme illustré ici:
http://covertprestige.info/test/07-colonnes-flottantes-et-place-dans-le-flux.html

Cela peut surprendre, et pour éviter ce comportement (ou en limiter les effets) les solutions sont:
- englober les éléments flottants dans un DIV en width:100%; overflow:hidden; pour empêcher le dépassement des flottants;
- utiliser un clear:both sur le paragraphe qui suit les flottants (ou créer un DIV pour englober les contenus à placer après le menu, et placer le clear:both sur ce DIV).
Modifié par Florent V. (30 Jun 2009 - 20:46)

Je suis toujours aussi ébahi par la rapidité et la qualité des réponses

Je vais tester tout ça, et surtout essayer de comprendre

Merci !

J'ai bien compris l'utilisation du width à 100% : on s'assure que la div recouvre bien la largeur.
J'ai bien compris aussi l'utilisation du overflow, cependant, ce que je ne comprends pas c'est pourquoi ma div ne "s'auto-height" pas ?

Mon autre question : quelle est la solution la plus propre entre les deux ?
Visiblement un clear:both fonctionne a merveille sur mon <p> même si je n'utilise pas de <div> au dessus ?