Alignement des blocs div

Bonjour à tous,

J'ai quelques difficultés à positionner mes blocs divs. Voici mon cas:

J'ai 3 blocs DIV (avec photos et textes) que j'aimerais aligner dans la longueur. Mais j'ai un mal fou pour y parvenir.
Je pense qu'il y a une façon automatique d'aligner tout ça mais je n'y arrive pas du coup je m'y prend pixel par pixel en jouant sur les valeurs.
Quand j'arrive à aligner les photos correctement c'est mon texte qui du coup lui est en décalage. Surement puisque j'aligne tout mon bloc div.
Est-ce que je dois dans se cas créer un bloc div pour mes images et un autre bloc div pour chaque texte? Ou il y t'il d'autres solutions?

Pour mieux vous exposer mon problème j'ai hébergé une capture d'écran sur ce lien:
http://imageshack.us/photo/my-images/541/divk.jpg/

Et voici mon code CSS (qui comportement certainement des erreurs et des choses inutiles). Soyez indulgents, je débute:

div#pdv
{
position: relative;
width: 135px;
padding: 10px;
font-size: 0.8em;
left: 0px;
bottom:0px;
}


div#capa_hebdo
{
position: relative;
width: 135px;
padding: 10px;
font-size: 0.8em;
left: 146px;
bottom:338px;
}

div#panorama
{
position: relative;
width: 135px;
padding: 10px;
font-size: 0.8em;
left: 290px;
bottom:632px;
}

Merci @ plus tard!

Edit:
Après quelques essais je suis heu... largué. J'ai donné un attribut id à chaque texte (<p>) mais quand je déplace celui-ci l'image et la photo placé à droite se déplacent aussi ce qui du coup chamboule tout. Est-ce dû à mon positionnement en "relative"?
Modifié par insomnie (08 Jan 2013 - 15:23)

Bonsoir,

Cela provient du fait que les images n'ont pas la même hauteur, CQFD...

Alors : soit vous mettez des images de la même hauteur (ce qui serait plus harmonieux je trouve), soit vous englobez chacune des images d'une div en appliquant une hauteur identique à ces div.

Merci pour cette hypothèse. Je vais l'explorer.

bonjour,
Plutôt que de passer par du bidouillage à compter pixel/pixel pour répartir vos bloc, je vous conseillerai plutôt de leur donner une dimension fixes avec un padding de 5px par exemple et ensuite float:left et il ne vous reste plus qu'à leurs donner un margin-left pour les séparer.
donc:

#div1,#div2,#div3{
   width:200px;
   height: 200px;
   float:left;
   padding:5px;
   margin-left:30px;
}

Pour la répartition à vous de voir !

Bonjour Tsoko,

C'est effectivement cette solution que j'avais en tête, mais je n'arrivais pas à la mettre en place.

Merci pour votre éclairage!