Problema con css e div che non si allineano

[gnola]

Ciao a tutti non riesco a venire a capo di questo problema di centrature di div...

Ho una finestra che funge da galleria foto quindi ho un box che deve contenere delle foto a larghezza variabile e a sinistra e a destra delle foto devono apparire delle freccine che però dovranno stare sempre alla stessa distanza dalla foto quindi non sempre allo stesso punto...il tutto deve essere centrato nella finestra generale...

Sto provando in tutti i modi ma on riesco....vedere foto allegata

questo è l'html

<div id="wrapper">  
<div id="main">         
<div id="headergallery">header    </div>      
  
<div id="centrogallery">   
<div id="contentgallery">       
<div id="frecciagallerysx"><img src="images/freccinasx.jpg" border="0" /></div>
   <div id="spaziofotogallery">     
<img src="file/foto/nomefoto.jpg"  border="0" />   
</div>            
<div id="frecciagallerydx"><img src="images/freccinadx.jpg" border="0" /></div>        

</div>         

<br><br>  
<div id="didascaliagallery">dfgfgh</div>    
</div>  
</div>   
</div>

e questo è il css:

#wrapper {
    width:1000px;
    height: auto;
background-color: #fff;
    overflow:hidden;
    position:absolute;
    left:50%;
    margin-left:-500px
}


#main {
width:1000px;
background-color: transparent;
}

#headergallery {
float : left;
    width: 100%;
    height: 75px;
background-color: transparent;
padding:8px;
}

#contentgallery {
float : left;
width: auto;
height: auto;
padding:8px 10px 8px 10px;
text-align: center;
background-color: aqua;
}

#frecciagallerysx{
float : left;
width: 60px;
background-color: red;
margin:50px 40px 50px 20px;
    margin:0 auto;
}


#frecciagallerydx{
float : left;
width: 60px;
background-color: red;
margin:50px 40px 50px 20px;
    margin:0 auto;
}


#spaziofotogallery {
float : left;
    width: auto;
background-color: yellow;
    margin:0 auto;
}

Chi sa aiutarmi?

[gnola]

ops ecco la foto allegata
Allegato 24596