[résolu]Image dépassant d'autres div...

Bonjour à tous,
mon problème qui me cause moulte ennuis depuis quelques temps et qui revient tout le temps est celui-ci :
j'ai une image en float:left à l'interieur d'un <div></div>. Quand je rajoute un div à la fin du premier contenant l'image, les deux div se chevauchent, et l'image passe donc par dessus le deuxième, cachant ainsi tout le texte.
Sous internet explorer, il n'y a pas ce problème, seulement sous mozilla.

Voilà ma source :

<div id="page">
<div class="content">
<div class="header_content">

<img src="img/puce_fleche.gif">Compétitions</div><!--fin header_content-->
<img class=home src=lien_image_1.jpg>
				<h3> Compétitions</h3>
				<img src=img/puce_fleche.gif border=0> Photos des compétitions régionales, nationales, internationales.<br>
				<img src=img/puce_fleche.gif border=0> Cette galerie contient <b>304</b> photos<br>Sous-galeries : <a href=#>2007 NPC Junior, Californie</a>, <a href=#>2007 NPC Los Angeles</a>, <a href=#>Las'Vegas Show</a>, <a href=#>Arnold Classic 2006</a>, <br><br><img src=img/puce_fleche.gif border=0> Accéder à la galerie 
</div><!--fin content-->
</div><!--fin page-->
[code]

en css :
[code]
.header_content {
	width: 780px; background: url('../img/navigation_topbg.jpg'); font-weight: bold;
	border: 1px solid #E3E1C8; font-size: 1em; color: #7E7C60; text-align: left
}

.content {
	width: 780px;
	padding: 5px; margin: 0 auto; text-align: justify
}

#page {
	width: 800px; margin: 0 auto;
	border-right: 1px solid #C0BD97; border-left: 1px solid #C0BD97;
	background: #fff; text-align: center
}

Screenshot sous IE ( où tout va bien ! )
http://umourdunet.free.fr/ie.jpg
Screenshot sous Mozilla ( où tout va mal ! )
http://umourdunet.free.fr/mozilla.jpg

en vous remerciant.
Modifié par neraul (13 Aug 2007 - 20:12)

Je dois être miraud mais je ne vois pas ton float dans ton code ni ta css. Cela veut dire qu'il est plus haut ?

En tout cas, j'aurais structuré autrement :
un div pour le titre sur fond gris, un div pour la photo avec les listes de galeries.
Pour celui là, la photo en image de fond (à gérer avec différentes classes) et un padding left égal à la largeur de la photo plus un chouia. Et ensuite à l'intérieur, ton titre, tes galeries et les sous galeries, sous forme soit de titre et liste ul à deux niveaux, soit de liste ul à trois niveaux.

Ce qui te permet accesoirement d'éviter tout float

j'ai oublié :

.home { float: left }

je test ce que tu m'a indiqué marie, je te tiens au courant merci.

impeccable marie-aude, je te remercie beaucoup

ce qui me donne :
pour le cadre du haut

.header_content {
	width: 780px; background: url('../img/navigation_topbg.jpg'); font-weight: bold;
	border: 1px solid #E3E1C8; font-size: 1em; color: #7E7C60; text-align: left
}

pour le seconde :

.content_home {
	padding-left: 305px;
	min-height: 150px;
	margin-top: 3px;
	margin-bottom: 3px;
}

et en html :

<div style="background: url('lien_image....') no-repeat;" class=content_home>les différentes galeries</div>

neraul a écrit :
j'ai oublié :

.home { float: left }

je test ce que tu m'a indiqué marie, je te tiens au courant merci.

:) my pleasure.

En fait ton problème venait que tu ne réinitialisais pas les float après chaque "barre". C'est plutôt IE qui ne se comportait pas correctement dans l'histoire...

IE c'est naze !