Problème de superposition de div

Bonsoir à tous,

Voilà mon premier post pour un premier problème !

Il se trouve que j'ai deux div qui se superposent alors qu'elles ne devrait pas ! Le pire c'est que je suis persuadé que la solution sera limpide pour les non débutants en CSS.

Voici le rendu : http://www.dedioueb.com/test.html

Voila le XHTML :

	<div id="sousmenu">
		<div id="cadremenubleu">
			<p>Titre du menu</p>
			<div id="contenumenubleu">
				<ul>
					<li>Bleu</li>
					<li>Bleu</li>
					<li>Bleu</li>
					<li>Bleu</li>
					<li>Bleu</li>
					<li>Bleu</li>
				</ul>
			</div>
		</div>	   
		<div id="cadremenujaune">
			<p>Titre</p>
			<div id="contenumenujaune">
				<ul>
					<li>blleu</li>
					<li>bleu</li>
					<li>bleu</li>
				</ul>
			</div>
		</div>	
	</div>

et le CSS :

div#sousmenu {					  
	width: 205px;
	padding: 0 0 0 6px;	margin: 0;
	float: left;
}	   

div#cadremenubleu {
	height: 39px;
	margin: 0; padding: 0 0 39px 0;
	background: url(menu_bleu.gif) top no-repeat;	
}				  
  
div#cadremenubleu p {
	height: 39px;
	padding: 0;
	margin: 0;
	color: #fff;									
	font-weight: bold;
}
 
div#contenumenubleu {
	padding-top: 40px;
	width: 205px; 
	background: url(menu_bg.gif) bottom no-repeat;
}

div#contenumenubleu ul {			
	margin: -25px 30px 10px 20px;
	color: #000;				
	list-style: none;
}
		
div#cadremenujaune {
	width: 205px; height: 39px;
	margin: 0; padding: 0 0 39px 0;
	background: url(menu_jaune.gif) top no-repeat;	
}				  
  
div#cadremenujaune p {
	height: 39px;
	padding: 0;
	margin: 0;
	color: #fff;									
	font-weight: bold;
}
 
div#contenumenujaune {
	padding-top: 40px;
	width: 205px; 
	background: url(menu_bg.gif) bottom no-repeat;
}

div#contenumenujaune ul {			
	margin: -25px 30px 10px 20px;
	color: #000;				
	list-style: none;
}

Je pense que c'est en rapport avec le float... Mais je ne sais pas trop....

Merci d'avance pour votre aide !
Modifié par jlegrand (23 Oct 2007 - 19:14)