28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
Je suis bloqué sur la mise en page d'un site où je souhaite afficher plusieurs "cadres", chaque cadres comporte une image, un nom, une adresse, ...
Le cadre est composé de 3 éléments :
- ch1 (haut du cadre) qui est un dégradé de couleurs
- cf1 (contenu) où apparaît l'image à gauche et le texte à côté de l'image
- cb1 (bas du cadre) qui est un dégradé.
Jusque là pas de problème pour les afficher l'un en dessous de l'autre mais lorsque je veux en mettre 2 côtes à côtes je suis bloqué.
mon code :

div.float {
 	float:left;
}

.ch1 {
     height:10px;
	 background:url(images/ch1.png) no-repeat;
	 width:400px;
}
.cf1 {
     padding:0 12px 0 12px;
	 background:url(images/cf1.png);
	 width:377px;
	 color:#FFF;
}
.cb1 {
     height:16px;
	 background:url(images/cb1.png) no-repeat;
	 width:400px;
} 


<div class="float">
			<div class="ch1"></div>
			<div class="cf1">
				<img src="logo.jpg" alt="" style="float:left;padding:0 8px 0 0" />
				nom<br />
				adresse<br />
				<div style="clear:both"></div>
			</div>
			<div class="cb1"></div>
		</div>
		
		<div class="float">
			<div class="ch1"></div>
			<div class="cf1">
				<img src="logo.jpg" alt="" style="float:left;padding:0 8px 0 0" />
				nom<br />
				adresse<br />
				<div style="clear:both"></div>
			</div>
			<div class="cb1"></div>
		</div>


Les cadres sont bien côtes à côtes mais le fond du site n’apparaît pas.

Je vous remercie d'avance pour votre aide.