Ciao a tutti, ho un problema con i CSS e gli allineamenti dei contenuti.

Ho due differenti DIV il cui layout e' definito da due ID diversi (la cosa importante e' che uno allinea il contenuto a sinistra,l'altro a destra) e quando visualizzo uno dopo l'altro non compaiono alla stessa altezza. Per ovviare ho pensato di inserirli in un terzo DIV per cui il CSS definisca l'attributo vertical-align: bottom, ma anche in questo caso i due mascalzoni restano sfasati.

Questo il codice HTML:

codice:
<div id="usatoList">
   <div id="usatoTitle">
      [img]blabla.jpg[/img]LINK
   </div>
   <div id="usatoThumb">
      [img]blabla2.jpg[/img]
   </div>
</div>
il CSS che definisce la posizione dei 3 elementi:
codice:
#usatoList
{
	vertical-align: bottom;
	padding: 0px;
}

#usatoTitle
{
	position: relative;
	left: 0px;
	bottom: 0px;
	text-align: left;
	vertical-align: bottom;
	padding: 0px;
}

#usatoThumb
{
	position: relative;
	right: 0px;
	bottom: 0px;
	text-align: right;
	vertical-align: bottom;
	padding: 0px;
}
In pratica io vorrei che all'interno di usatoList ci fossero usatoTitle allineato tutto a sinistra e usatoThumb allineato tutto a destra, sulla stessa riga; mentre ora mi visualizza prima usatoTitle, poi va a capo e mi visualizza usatoThumb.

Dove sbaglio?
Ci sono altri metodi?