[Résolu] Positionner 2 div en "float" sur un autre div

Bonjour, j'ai positionné 2 balises div (bandeau_gauche et corps_droite) au sein d'un 3ème div (contenu) qui me sert à afficher une image de fond qui se répète.
Après plusieurs essais, je m'aperçois que si je positionne les 2 div avec float: right pour l'une et float: left pour l'autre, l'image de fond disparaît. Ce qui n'est pas le cas si un seul div est positionné en float.
Comment puis-je réaliser celà? Ou existe-t-il une solution plus simple?

voici le xhtml:

		<div id="contenu">
			<div id="bandeau_gauche">
				<h1>Bandeau à gauche</h1>
					<p>Lorem ipsum dolor sit amet,<br />
					consectetuer adipiscing elit.</p>
			</div>
			<div id="corps_droite">
				<h1>Corps du site</h1>
					<p>Lorem ipsum dolor sit amet<br />
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut posuere suscipit neque. Etiam condimentum tortor in libero. Quisque malesuada turpis ut ipsum. Praesent ipsum. Morbi volutpat mauris in erat.</p>
				<h2>Titre h2</h2>   
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut posuere suscipit neque. Etiam condimentum tortor in libero.<br />
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut posuere suscipit neque. Etiam condimentum tortor in libero.</p>
				<h2>Titre h2</h2>   
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut posuere suscipit neque.<br />
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut posuere suscipit neque.<br />
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut posuere suscipit neque.</p>
			</div>
		</div>
		<div id="pied_de_page">
		<p>Copyright © 2006 R. Chayla Immobilier | 76 allée d'Iéna 11000 Carcassonne | tél: 04 68 71 57 27</p>
		<p><a href="http://validator.w3.org/check?uri=referer" title="W3C XHTML validator"><img src="Images/pied_de_page/0xhtml_pw.png" alt="W3C XHTML validator" /></a>&nbsp;&nbsp;<a href="http://jigsaw.w3.org/css-validator" title="W3C CSS validator"><img src="Images/pied_de_page/0css_pw.png" alt="W3C CSS validator" /></a>&nbsp;&nbsp;<a href="http://www.spreadfirefox.com/?q=affiliates&amp;id=0&amp;t=85" title="Firefox"><img src="Images/pied_de_page/firefox.png" alt="Téléchargez Firefox" /></a></p>
		</div>
</body>

les css:

#en_tete  {
	width: 806px;
	margin: auto;
	padding: 0;
}

#bandeau_haut {
	background: url("Images/entete.gif") 0 0 no-repeat;
	height: 206px;
	width: 806px;
}

#menu {
	position: relative;
	background: url("Images/menu.gif") 0 0 no-repeat;
	width: 806px;
	height: 41px;
	margin: auto;
}

#contenu h1 {
	margin: 0;
	padding: 0;
}

#contenu h2 {
	margin: 0;
	padding: 0;
}

#contenu {
	background-image: url("Images/fondpage.gif");
	width: 806px;
	margin: 0 auto;
	padding: 0;
}

#bandeau_gauche {
	float: left;
	margin-left: 37px;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 185px;
}

#corps_droite {
	float: right;
	margin-right: 40px;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 524px;
}

#pied_de_page {
	background: url("Images/piedpage.gif") no-repeat;
	width: 806px;
	height: 85 px;
	margin: auto;
	padding: 2px;
}

et le lien vers la page: http://chaylaimmobilier.com/site2.0/index.html
Modifié par Beno (10 Apr 2006 - 16:45)

Certainement mettre un block en fin de #contenu avec proprieté
width:100%; clear:both;

J'ai créé un balise h3 juste à la fin de #contenu avec width:100%; clear:both; comme tu me l'as conseillé, mais il n'y a aucun changement
Que puis-je faire?

Si, c'est bon, ça marche! Merci JP.