Déplacer un div de position absolue en postion absolue

Bonjour à tous!
Je suis souvent venue sur ce forum pour trouver la réponse à mes problèmes mais là pour la 1ère fois je ne trouve pas de solution, je craque et je poste!
Ma page est un glossaire, dont la navigation se fait horizontalement.


(ou image ici : http://photos1.blogger.com/blogger/2955/4090/1600/glossaire.0.jpg)

Je voudrais qu'au clic sur une lettre en haut à droite, le div central de contenu se déplace pour amener la lettre choisie en 1ère position.
S'il s'agissait juste de dire au calque "centre" : "déplace-toi de tant de px vers la gauche", ça ne me poserait pas de problème.
Mais là il s'agit de lui dire : "Quand je clique sur A, déplace-toi à x=0px. Quand je clique sur B, déplace-toi à x=20px. Quand je clique sur R, déplace-toi à x=3000px".
En position absolue donc.
L'idéal serait que le contenu se déplace en glissant, mais au pire je serais déjà contente qu'il "saute"!

J'ai aussi essayé de le faire avec les scénarios de Dreamweaver et la Timeline, mais soit je suis débile, soit c'est buggué. (Je crée mon scénario, et lorsque je dis à la 2e lettre : onclick va à l'image 2 du scénario, le code du scénario disparait de ma page!!!!)

Je ne peux pas vous copier/coller mes tentatives de code, parce que tout ce que j'ai fait était bon à jeter à la poubelle.


Je ne sais pas si ça peut vous aider à m'aider, mais voici en gros le code de ma page :

<!-- La nav en haut -->
<div id="alphabet"><a href="#" class="nav_sel">A</a> <a href="#" class="nav_sel">B</a> <a href="#" class="nav_sel">C</a> <a href="#" class="nav_sel">D</a> <a href="#" class="nav_sel">E</a> <a href="#" class="nav_sel">F</a> <a href="#" class="nav_sel">G</a> <a href="#" class="nav_sel">H</a> <a href="#" class="nav_sel">I</a> J K L M N O P Q R S T U V W X Y Z</div>

<!-- Centre -->
<div id="centre">
<div id="ligne1">
<div id="lettre_haut"><img src="../images/glossaire/bio/a.png"></div>
<div id="bloc1">Je vous passe les enfilades de mots, tous les blocs contiennent plein de mots quoi!</div>
  <div id="lettre_haut"><img src="../images/glossaire/bio/c.png"></div>
<div id="bloc1">Des mots</div>
<div id="blocfin"></div>
<div id="lettre_haut"><img src="../images/glossaire/bio/e.png" width="15" height="38"></div>
<div id="bloc1">Des mots</div>
  <div id="bloc2">Des mots</div>
  <div id="blocfin">Des mots</div>
  <div id="lettre_haut"><img src="../images/glossaire/bio/c.png"></div>
<div id="bloc1">Des mots</div>
<div id="blocfin"></div>
</div>

<div id="clear"></div>

<div id="ligne2">
<div id="lettre_bas">&nbsp;</div><div id="bloc1">&nbsp;</div>
<div id="blocfin">&nbsp;</div>
<div id="lettre_bas"><img src="../images/glossaire/bio/b.png"></div>
<div id="bloc1">Des mots</div>
  <div id="blocfin"Des mots</div>
  <div id="lettre_bas"><img src="../images/glossaire/bio/d.png"></div>
<div id="bloc1">Des mots</div>
  <div id="bloc2">Des mots</div>
   <div id="blocfin"></div>
  <div id="lettre_bas"><img src="../images/glossaire/bio/f.png" width="15" height="38"></div>
<div id="bloc1">Des mots</div>
  <div id="blocfin">Des mots</div>
</div>

</div>

Quant à la feuille de styles, que je vous épargne, je signale juste que :

#centre{
	position:absolute;
	top:125px;
	left:207px;}

#clear{clear:both;} 

Tout le reste (ligne, bloc etc) est en float:left

Merci à l'avance à tous ceux qui pourront m'aider!
Et merci à ce forum d'exister!

Ben j'ai mal formulé mon problème, ou bien il est insoluble pour qu'aucun d'entre vous n'y réponde?