[Résolu] Image qui dépasse du bloc dans lequel elle est contenue

Bonjour,

après avoir lu avec attention la plupart des tutoriaux CSS, j'en arrive à construire ma page à peu près comme je le souhaite

Mais j'ai un problème, une différence de rendu entre Firefox et IE7... et pour une fois, IE7 s'en sort le mieux (par rapport à ce que j'attends en tous cas).

Voilà le résultat sous IE7 (résultat souhaité donc) (texte et image ont été masqués) :
http://img485.imageshack.us/img485/8315/internetexplorergv9.jpg

Et la même chose sous Firefox :
http://img258.imageshack.us/img258/2214/firefoxhi0.jpg

Ca ne se voit pas car le texte a disparu, mais en fait sous Firefox le bloc s'arrête au niveau du texte, et donc l'image, qui est plus grande, dépasse. Alors que sous IE7, le bloc s'arrête au niveau de l'image.

J'ai validé mon code HTML et mon code CSS grâce aux validators appropriés. Voici le code HTML pour un de ces blocs :

<div class="corps_bloc"><h1>titre</h1>
<img class="droite" src="img/image.png" alt="image"></img>
<p>bla bla</p>
</div>

Et le code CSS qui correspond :

.corps_bloc {
	border: 1px solid black;
	background-color: #BED7FC;
	width: 781px;
	height: auto;
	margin-top: 20px;
	margin-left: 200px;
	margin-bottom: 0px;
	padding: 0px;
}

.corps_bloc img.droite {
	float: right;
	padding: 5px;
}

.corps_bloc img.gauche {
	float: left;
	padding: 5px;
}

.corps_bloc p {
	font-family: 'Verdana', Arial, 'Times new roman', Times, serif;
	font-size: 11px;
	margin: 0px;
	padding: 5px;
	text-align: justify;
	line-height: 1.3em;
}

Je ne pense pas que le reste soit nécessaire, mais je peux poster le code complet si nécessaire.

Merci d'avance !
Modifié par nbst84 (26 Jun 2007 - 18:16)

Bonjour et bienvenue sur Alsacréations ,

Au delà des tutoriels as-tu jeté un oeil à la FAQ:
Comment éviter que mes éléments flottants (float) dépassent de leur conteneur ?
Modifié par Igor (25 Jun 2007 - 17:36)

Aah, je l'avais consultée pour d'autres problèmes rencontrés précédemment mais je n'ai même pas pensé à y retourner

En tous cas l'ajout d'un clear: both résoud bien le problème, merci beaucoup

En fait j'ai parlé un peu vite, je n'ai toujours pas résolu mon problème. J'ai un peu de mal à appréhender le fonctionnement de clear malgré la lecture des liens de la FAQ.

En rajoutant dans ma feuille CSS :

.spacer {
	clear: both;
}

Et en rajoutant la ligne correspondante dans mon code HTML :

<div class="corps_bloc">
<h1>News Bidon</h1>
<p>
	stoi l'bidon.
</p>
<div class="spacer"></div>
</div>

J'obtiens le résultat suivant :

http://img104.imageshack.us/img104/8405/spafinixq6.jpg

... à savoir que désormais, mon image ne dépasse plus de son bloc, mais par contre le bloc s'agrandit toujours jusqu'à atteindre le bas du menu qui est à sa gauche, même s'il ne contient qu'une ligne de texte.




La CSS du menu au cas où :

#menu_vertical {
	float: left;
	width: 180px;
	margin-left: 0px;
	margin-right: 10px;
}

#menu_vertical .menu_bloc  {
	background-color: #BED7FC;
	padding: 0px;
	margin: 0px;
	margin-top: 1px;
	margin-bottom: 15px;
	border: 1px solid black;
}

Avec son code HTML :

<div id="menu_vertical">
	<h3>titre</h3>
	<div class="menu_bloc">
		<ul>
			<li><a href="">item1</a></li>
			<li><a href="">item2</a></li>
		</ul>
	</div>

<!-- d'autres menu_blocs -->
</div>

J'ai beau essayé pas mal de choses (selon ma compréhension encore limitée du clear et même du positionnement en général à vrai dire), je ne parviens pas à éviter le problème.

Merci encore d'avance
Modifié par nbst84 (25 Jun 2007 - 18:49)

Salut

Le lien que t'a donné Igor propose trois solutions différentes. Tu ne nous parles que de ton échec avec la première. Quid des deux autres ?

Pour le problème avec le clear, explications ici :
http://www.blog-and-blues.org/articles/Float%2C_clear_et_contextes_de_formatage
(Lien donné à la fin de l'item de la FAQ indiqué par Igor.)

Pour le dépassement des flottants, on utilisera plutôt la propriété overflow (pour créer un contexte de formatage, justement) :

div.corps_bloc {
overflow: hidden;
}

Je n'avais pas compris comment utiliser l'overflow. Mais maintenant ça y est, et mon problème est résolu (pour de bon cette fois je pense)

Merci beaucoup