Allineamento orizzontale (o verticale?) più div

[atsap]

Saluti a tutti!

Premetto di aver cercato prima... ma le risposte non facevano al caso mio.
Allora, ho un div principale con all'interno 4 div che a loro volta contengono un altro div.
Ora... quest'ultimo div deve essere posizionato in modo identico! E questo non succede... allego un'immagine che chiarisce meglio il problema.



Come potete vedere, il div #more contenuto in #3, non è allineato come gli altri! Questo perché il contenuto di #3 è più "basso", diciamo.

Questo in pseudo-codice:

<contservizi>
  <1>
     blablabla
          <more> blablabla </more>
  </1>
  <2>
      blablabla
          <more> blablabla </more>
  </2>
  <3>
      blablabla
          <more> blablabla </more>
  </3>
  <4>
      blablabla
          <more> blablabla </more>
  </4>
</contservizi>

questo il css

#contservizi{
background-color:#FFFFFF;
margin-top: 20px; 
height: 250px;
}

#voce1 {
background-color: #003366; 
background:url(../img/voce1.png) no-repeat;
}

#voce2 {
background-color: #002233;
background:url(../img/voce2.png) no-repeat;
}

#voce3 {
background-color: #081c38;
background:url(../img/voce3.png) no-repeat;
}

#voce4 {
background-color: #112644;
background:url(../img/voce4.png) no-repeat;
}

#voce1, #voce2, #voce3, #voce4 {
width: 219px; height: 350px; float: left;
margin-left: 2px;
color:#FFFFFF;
}

#voce1 p, #voce2 p, #voce3 p, #voce4 p{

margin-top: 70px;
margin-left: 30px;
margin-right: 20px;
text-align:justify;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height: 25px;
max-height: 280px !important;
overflow: hidden;
}

#more {
width: 70px;

margin-left:110px;

/* CHE TIPO DI POSIZIONAMENTO USARE? ASSOLUTO? Preferirei evitare, se possibile! */

}

questo praticamente l'html:

div id="contservizi">
            <div id="voce1">
                


                      blablabla
                </p>
		
		<div id="more">[img]img/more.png[/img] </div>
          </div>
            <div id="voce2">
                


                      blablabla
                </p>
		
		<div id="more">[img]img/more.png[/img] </div>
          </div>
            <div id="voce3">
                


                      blablabla                       blablabla                       blablabla
                      blablabla                      blablabla                      blablabla
                      blablabla                      blablabla                      blablabla
                      blablabla                      blablabla                      blablabla
                      blablabla                      blablabla                      blablabla
                </p>
		
		<div id="more">[img]img/more.png[/img] </div>
          </div>
            <div id="voce4">
                


                      blablabla
                </p>
		
		<div id="more">[img]img/more.png[/img] </div>
          </div>
</div>

Insomma, siccome nel div #voce3 c'è più blablabla, il #more ovviamente si adatta e scende più giù o più su (in base alla lunghezza del blablabla).
Devo per forza usare posizionamento assoluto?
Scusate, usassi posizionamento 'relative' il margine superiore (o la proprietà top o bottom), la posizione di #more non dovrebbe essere in base al div "padre" (#voce1, #voce2....)...

Spero di essermi spiegato e scusate il blablabla

Grazie per l'aiuto!

[codencode]

Per posizionare #more in basso a destra rispetto a #1, #2, #3 e #4 vanno dichiarati relative #1, #2, #3 e #4 ed absolute #more (con bottom:0 e right:0 o valori superiori). In tal modo #more non risentirà della lunghezza del contenuto di #1, #2, #3 e #4.
Se usi relative per #more, non ottieni questo effetto nemmeno usando i margin o le proprietà top, right, bottom e left. Un contenuto relative si posiziona relativamente (appunto) al contenuto che precede. Applicando top, right, bottom o left ad un contenuto relative se ne ottiene solo la traslazione rispetto alla sua posizione originaria.

[atsap]

Grazie mille! In effetti non avevo pensato a bottom, andavo di top e non mi trovavo :-P

Grazie ancora!