Gestione box sotto titoli

[Valeria75_bis]

Ciao a tutti, ho creato una pagina con 3 barre (immagini) con titoli, sotto le quali vorrei inserire dei box per dei testi ... allineati sotto ogni barra


bar_s (516px) - bar_e(229px) - bar_n (229px)
.... e sotto i rispettivi contenuti

il mio problema è che non so come posizionare le 3 aree di testo.... mi risultano spostate e non allineate sotto:

<div id="bar">
    <div id="bar_s"><div id="bar_e"><div id="bar_n">
</div>

<div id="content">
    <div id="content_s">sdsad</div>
    <div id="content_e">asdas</div>
    <div id="content_n">3333</div>
</div> 

#main
{
    width: 980px;    
    height: 100%;
}

#bar_s
{
    margin-top: 8px;
    height: 60px;
    background: url(images/bar_s.png) no-repeat;
}

#bar_e
{
    margin-left: 518px;
    margin-top: 8px;
    height: 58px;
    background: url(images/bar_e.png) no-repeat;
}

#bar_n
{
    margin-left: 231px;
    margin-top: 8px;    
    height: 58px;
    background: url(images/bar_e.png) no-repeat;
}


#content_s
{
    width: 518px;
    margin-top: 8px;
    height: 360px;
    background: #000044;
}

#content_e
{
    width: 231px;
    margin-top: 8px;
    height: 360px;
    background: #000999;
}

#content_n
{
    width: 231px;
    margin-top: 8px;    
    height: 360px;
    background: #006666;
} 

Io vorrei solo le 3 barre (immagini) con i titoli allineate orizzontalmente

e sotto le 3 aree di testo in cui posso inserire i miei contenuti (incolonnati con i rispettivi titoli superiori)



Cosa sbaglio??


Grazie