3 blocs à cotés + 3 autres en dessous ect...

Bonjour
Bonne fêtes de fin d'années pendant que j'y suis =)

Voilà je suis perdu : je voudrais aligner 3 blocs côtes à côtes. Jusque là pas de soucis...
Le problème se pose lorsque je veut en rajouter 3 autres en dessous. J'ai rien a vous montrer en ligne mais voilà mon css et mon html :

#conteneur {
position: absolute;
width: 750px;
left: 50%;
margin-left: -375px;
}
#header {
display: none;
height: 200px;
background-image:url(img-index/header.jpg);
}
.bloc1 {
position: absolute;
left:0;
width: 240px;
height: 100px;
margin-top: 10px;
background-color: #000000;
}
.bloc2 {
position: absolute;
width: 240px;
height: 100px;
margin-left: 255px;
margin-top: 10px;
background-color:#83adcd;
}
.bloc3 {
position: absolute;
width: 240px;
height: 100px;
right: 0;
margin-top: 10px;
background-color:#000000;
clear: both;
}



<div id="conteneur">

	  <div id="header"></div>

	  <div class="bloc1"></div>
	  <div class="bloc2"></div>
	  <div class="bloc3"></div>
	  <div class="bloc1"></div>
	  <div class="bloc2"></div>
	  <div class="bloc3"></div>
	  

</div>

En fait quand je regarde en local mes 6 blocs se superposent...

C'est normal vu que tu utilise des position: absolute et que les trois blocs que tu veux rajoutezr en-dessous sont de la meme classe que ceux d'au dessus, ils ont donc les memes margin-top donc ils se mettent exactement au dessus des 3 premiers.
Dans un premier temps, j'essaierai deja d'utiliser plutot un float: left pour chaque bloc et une structure comme celle ci :

<div id="conteneur">

	  <div id="header"></div>

	  <div class="[b]bloc1[/b]"></div>
	  <div class="[b]bloc1[/b]"></div>
	  <div class="[b]bloc1[/b]"></div>
	  <div class="[b]bloc2[/b]"></div>
	  <div class="[b]bloc2[/b]"></div>
	  <div class="[b]bloc2[/b]"></div>
</div>

où tu specifies un margin-top different pour .bloc1 que pour .bloc2

Voila, bon courage pr la suite
++
Modifié par b1nary0d1g1t (30 Dec 2005 - 11:27)

J'ai reussi a résoudre le prob en modifiant le 3em bloc.
Bon la c'est pas tout a fait pareil puisque les bocs ont plus les même taille et plus d'espacement

.bloc1 {
position: absolute;
left: 0;
width: 250px;
height: 100px;
margin-top: 10px;
background-color: #000000;
}
.bloc2 {
position: absolute;
width: 250px;
height: 100px;
margin-left: 250px;
margin-top: 10px;
background-color:#83adcd;
}
.bloc3 {
width: 250px;
height: 100px;
margin-left: 500px;
margin-top: 10px;
background-color:#000000;
}