div float e allineamento centrale

[donato.chpp]

ciao a tutti, cerco di spiegare il mio problema.

ho creato un div contenitore che contiene tre div che vanno l'uno di fianco all'altro attaccati. Per mettere l'uno di fianco all'altro ho usato float:left, che va bene, però chiaramente tutti e tre mi vanno a sinistra, mentre io li vorrei in posizione centrale.

posto il codice ccs:

#contenitore {
             width:100px;
}

#primo {
   float:left;
   width:20px;
}

#secondo {
   float:left;
   width:30px;
}

#terzo {
   float:left;
   width:20px;
}

posto ora il codice html:

<div id="contenitore">
   <div id="primo"></div>
   <div id="secondo"></div>
   <div id="terzo"></div>
</div>

spero di essermi spiegato bene, qualcuno potrebbe aiutarmi per favore???
ho fatto diverse prove con display, float, text align, ma non mi viene, vengono sempre messi sulla sinistra...
grazieee

[conti1]

ciao
allora metti questo nel tuo html
 non sapendo le misure del template ho messo 100% 30% 30%
100 e la prima colonna 30 le altre due

Codice: [Seleziona]

         <table width="100%" border="0">
   <tr>
    <td width="50%"> <div id="primo">
      <jdoc:include type="modules" name="user9" style="xhtml" />
    </div></td>
   <td width="30%"> <div id="secondo">
     <jdoc:include type="modules" name="user8" style="xhtml" />
</div></td>
    <td width="30%"><div id="terzo">
      <jdoc:include type="modules" name="user7" style="xhtml" />
</div></td>
   
   </tr>
 </table>
il css

Codice: [Seleziona]

#primo {
   
}

#secondo {
 
}

#terzo {
   
}

[donato.chpp]

grazie mille conti1 ottima risposta, funziona... i tre div mi servono perchè voglio fare un menu orizzontale con bordi arrotondati. l'unico problema rimasto è che tra un primo, secondo, e terzo mi da un leggero spazio, anche dopo aver messo margin:0;

ti posto il codice css che ho messo:

#menu {
   height:30px;
   background-image:url(../images/bg_menu.png);
}

#menu_l {
   width:30px;
   height:30px;
   background-image:url(../images/menu_l.png);
}

#menu_c {
   width:30px;
   height:30px;
   background-image:url(../images/menu_c.png);
   background-repeat:repeat-x;
}

#menu_r {
   width:30px;
   height:30px;
   background-image:url(../images/menu_r.png);
}

#menu table { border:none; margin:0 auto; }
#menu td { padding:0;}

e il codice html:

<!-- inizio menu -->
<div id="menu">
            
          <table>
            <tr>
             <td>
                         <div id="menu_l">
         </div>
                        </td>
                        <td>
                         <div id="menu_c">
                   </div>
                        </td>
                        <td>
                         <div id="menu_r">
                        </div>
                        </td>
      </tr>
   </table>
               
               
</div>
<!-- fine menu -->

qualche dritta? grazie comunque per l'illuminante risposta di prima 
ultima domanda, ma se il menu lo faccio con questa soluzione delle tabelle a livello di visibilità cambia qualcosa??? con google intendo, poichè ho letto che le tabelle è meglio non usarle.... grazie ancora.

[conti1]

ciao
aggiungi questo nel css primo secondo terzo ho come li hai chiamati tu
tu vuoi aumentare lo spazio giusto tra una colonna  e l'altra giusto

Codice: [Seleziona]

padding-right:40px;

[donato.chpp]

no, io iovece vorrei il contrario, lui tra il primo e il secondo mi da uno spazio di un paio di px, invece io vorrei che venissero attaccate, e stessa cosa tra il secondo e il terzo

[conti1]

allora sostituisci  questo che e la prima riga di quello che to postato

Codice: [Seleziona]

<table width="100%" border="0">
con questo

Codice: [Seleziona]

<table width="100%" border="0" cellspacing="0">in questo modo hai le colonne senza spazzi.