Decalage float

Bonsoir,

J'ai un div auquel s'applique la class contenu

.contenu {
margin: 7px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: justify;
}

Dans ce div, j'ai du texte et une image. Sur le screen, sur la premiere image on voit le texte et l'image en dessous sans style, mais ca fait un tres grand espace vide. Sur la seconde image j'ai mon image avec un float right et mon texte ensuite, le probleme on le voit, mon image depasse de la div et decale le reste comme "Par Nono le 03/07/2006 à 21h15" et le titre de la news d'en dessous. Comment faire pour que l'image reste bien dans la div comme le texte ? Merci de votre aide.
A bientôt,

http://www.jldprod.com si vous voulez voir de plus pres.
Modifié par nonoteam (03 Jul 2006 - 21:50)

Bonjour nonoteam,

Tu peux faire une recherche dans le forum sur le dépassement de flottants, tu devrais trouver ton bonheur.

Super j'ai rechercher plus profondement et j'ai trouvé, j'ai mis un overflow: auto au bloc conteneur. Merci beaucoup de m'avoir repondu
A bientôt,

Edit:

Sur Firefox tout s'affiche impecablement, mais sur IE quelques problemes encore:


Decalage sur la droite, et date qui se met a gauceh de l'image.
Modifié par nonoteam (03 Jul 2006 - 23:42)

Pour tes deux petits problèmes, comme tu ne donnes pas de code c'est un peu difficile. Pour le décalage du flottant sur IE, il s'agit probablement du Doubled Margin Bug. Le fix généralent conseillé est de placer un display: inline sur l'élément flottant en question.

Rien a faire, même avec le display : inline, j'avais deja essayé.
Voici le code du conteneur et du flotant:

.contenu {
margin: 7px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: justify;
overflow: auto;
}


.right {
float: right;
margin: 0px 0px 7px 7px;
display: inline;
}

Avec un div et un clear:both ca fait tout decaler, les autres solutions avec un display: table ne marche pas aussi.