[RESOLU] Background ne s'affiche pas dans la div conteneur

Bonjour,

Voilà j'ai un petit problème de background. En effet, j'ai une div contenant 3 div dont la largeur est à 33% avec un float à left. Mon problème est que dans ce cas là, ma div conteneur n'a plus de background, alors que quand j'enlève le float left , mon conteneur retrouve son background.

Je ne sais pas si je suis bien clair, donc voilà mon code :

#wrap { width: 100%; }

.centerWrap {
	margin: 0 auto; padding: 0;
	width: 70%;
	max-width: 1000px;
	min-width: 750px;
	text-align: left;
}

#sidebar { 
	background: #666; 
}
div#search, div#tag, div#archives, div#selection { 
	width: 33%; 
	/*float: left; */
}

<div id="wrap">
	<div id="sidebar">
		<div class="centerWrap">		
			<div id="search">
				<form action="" method="get">
					<h2><label for="q">Rechercher</label></h2>
					<p><input name="q" id="q" type="text" size="10" value="" /><input type="submit" class="submit" value="ok" /></p>
				</form>
			</div>								
			<div id="tag">
				<h2>Tag</h2>
				<ul><li><a href="#">test1</a></li><li><a href="#">test2</a></li></ul>				
			</div>
									
			<div id="archives">
				<h2>Archives</h2>
				<ul><li><a href="#">août 2006</a></li></ul>
			</div>
		</div>
	</div>
</div>

Merci d'avance pour votre aide.
Modifié par toof (25 Aug 2006 - 02:20)

C'est une image que tu as en background de ta div #sidebar ?
Parce que qu'avec un background-color ça fonctionne. Par contre, avec une image, vu que le contenu est flotant, il est fréquent que le background ne suive pas. Pour remédier à la situation, met un clearer tout de suite après ta div #archives. Garantie que ça va fonctionner

non non c'est bienune couleur que j'ai en background :

#sidebar { 
	background: #666; 
}

qu'appelles-tu un clearer ?

Je viens de remaquer que ton problème était sur FireFox..
Bref, ça fonctionne quand même avec le clearer.

Ce que j'appelle un clearer, c'est une div vide à laquelle je donne la propriété clear:both;

Voici donc ce que j'ai rajouter dans ton code :
CSS div.clearer {clear:both;height:1px;overflow:hidden;}
HTML <div class="clearer"></div> (Insère cette div à la suite de ta div #archives )

Ça devrais fonctionner

merci à toi c'est cool ça marche ! c'est quand même bizarre que FF ça ne marche pas alors que sous IE oui (je viens juste regarder sous IE) ..