[Résolu] Problème de supperposition de bloc div et image

bonjour,
je bloque sur le design de mon site:

1 container centré de 800 px

dedans:
3 colonnes :
1 menu général à gauche de 200px
le contenu à droite du menu
1 bloc news à doite

j'ai 2 problème:
le 1er est que les bloc Div du contenu passe sous le bloc news
2 eme et que quans je met une image que je voudrai entouré de txt dans un des bolc du contenu, celle ci dépasse sur les bloc suivant

Voir image

voici la source:

<style>
#container{
width:800px;
background-color:#333;
margin-left:auto;
margin-right:auto;
}

#menu{
	float:left;
	width:200px;
	background-color:#AAA;

}
#contenu{
margin-left:200px;
background-color:#CCC;
}

#news{
width:200px;
background-color:#DDD;
float:right;
padding:5px;


}
.block{
	border: thin solid #FF0000;
	margin:5px;
	background-color:#EEE;
	padding:5px;

	
}

</style>

<div id="container">

	<div id="menu">
		MENU
			<li>menu 1</li>
			<li>menu 2</li>
			<li>menu 3</li>
			<li>menu 4</li>
			<li>menu 5</li>
	</div>
	
	<div id="contenu">
		<div id="news">
			NEWS
			<p>ceci est la news 1 <br>bla bla bla...</p>
			<p>ceci est la news 2 <br>bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli ...</p>
			<p>ceci est la news 3 <br>blo blo blo blo blo blo blo blo blo blo blo blo blo blo blo blo blo blo blo blo blo blo blo ...</p>
	
		</div>
		CONTENU
				<div class="block">
					Je ne suis pas parfait, mais je fais de mon mieux. J’ai fait tout ce qu’il fallait, tout ce qu’on m’a dit, tout comme il faut, et il y en a des millions comme moi, alors pourquoi est-ce que le monde va de mal en pis ?
				</div>
				<div class="block">
					Je ne suis pas parfait, mais je fais de mon mieux. J’ai fait tout ce qu’il fallait, tout ce qu’on m’a dit, tout comme il faut, et il y en a des millions comme moi, alors pourquoi est-ce que le monde va de mal en pis ?
				</div>
				
    <div class="block"> <img src="http://www.google.fr/intl/fr_fr/images/logo.gif" width="201" height="217" align="left">Je 
      ne suis pas parfait, mais je fais de mon mieux. J’ai fait tout ce qu’il 
      fallait, tout ce qu’on m’a dit, tout comme il faut, et il y en a des millions 
      comme moi, alors pourquoi est-ce que le monde va de mal en pis ? </div>
    <div class="block"> Je ne suis pas parfait, mais je fais de mon mieux. J’ai 
      fait tout ce qu’il fallait, tout ce qu’on m’a dit, tout comme il faut, et 
      il y en a des millions comme moi, alors pourquoi est-ce que le monde va 
      de mal en pis ? </div>
	</div>
	
	

</div>

j'espere que vous avez une solution

Amicalement
Modifié par khoudj (20 Aug 2006 - 17:41)

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Bonjour khoudj,

Si tu ajoutes par exemple ce code :

.block {
	overflow: hidden;
	zoom:1; /* pour IE */
}

« .block » ne glissera plus sous #news et englobera ses propres flottants (comme l'image Google ici)

Zoom:1 ne sera pas efficace avec IE 5.01 (mais 5.5 et supérieurs oui) ni IE mac.
On peut filtrer IE mac et ajouter par commentaire conditionnel pour IE 5.01 (ou directement pour IE <=6 et se passer de zoom étant donné qu'IE 7 prendra mieux en charge la propriété overflow) :

.block{
	height: 1%;
	overflow: visible;
}

Pour en savoir plus : « Float, clear et contextes de formatage » (Blog & Blues, Laurent Denis)
Modifié par Alan (19 Aug 2006 - 15:46)

Super ca marche de la balle !!!
pour le style :

.block{
	height: 1%;
	overflow: visible;
}

comment fais tu pour "filtrer IE mac et ajouter par commentaire conditionnel pour IE 5.01"

en tout ca super merci pour l'aide je début en css, je suis encore un vieux de la vielle qui jouais du tableau à toutva
Modifié par khoudj (19 Aug 2006 - 18:04)

Concernant IE 5.01 et IE mac, c'était surtout pour le signaler, mais si tu ne t'en occupes pas ici, c'est n'est pas vraiment grave. Le résultat restera accessible, c'est-à-dire comme sur l'image du premier poste.
Tu peux donc t'en tenir là à mon avis

Pour info quand même :
Afin de filtrer IE mac on peut appeler le fichier .CSS via la règle @import de certaines façons.
Concernant le commentaire conditionnel, cf la FAQ

Ok
merci pour ton aide
à bientôt

Laurent