Distribuire Div Su Unica Riga

[matteriv]

Ciao, ho creato con lo strumento guidato in Dreamweaver CS6 un layout liquido.
Sul primo DIV ho centrato un immagine; successivamente sulla riga sotto ho inserito cinque DIV che conterranno ciascuno le singole voci di menù. Come posso distribuire equamente su tutta la riga questi cinque DIV nella visualizzazione "Formato desktop"?

<div class="gridContainer clearfix">
<div id="header" align="center">[img]images/1.jpg[/img]</div>
<div class="menu" id="menu1">home</div>
<div class="menu" id="menu2">ristorante</div>
<div class="menu" id="menu3">pizzeria</div>
<div class="menu" id="menu4">eventi</div>
<div class="menu" id="menu5">contatti</div>
</div>

Allego screenshot in cui si vede come il DIV contenente la voce CONTATTI non è perfettamente sovrapposto alle due colonne verticali.

[ratte]

Hmmm... una cosa tipo:

.menu {
	width: 18%;
	margin: 0 1%;
	float: left;
}

potrebbe funzionare?

o/ !

[matteriv]

Ho risolto creando un div con nidificati altri div all'interno suddivisi in tables con allineamento center:

<div id="articles">
<div id="cucina"><table width="200" class="table" border="0" align="center" cellspacing="0" cellpadding="0">
<tr>
<td><table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="title1">La cucina</td>
</tr>
<tr>
<td class="title3">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper eleifend libero eget feugiat. Proin rhoncus nunc ante, non cursus erat. Donec iaculis libero vel odio tempus eu interdum enim mollis. Suspendisse potenti. Nunc imperdiet magna et mauris vulputate porttitor vitae ac tortor.</p>


</p></td>
</tr>
<tr>
<td class="title2">LEGGI</td>
</tr>
</table></td>
</tr>
</table></div>
<div id="pizzeria"><table width="200" class="table" border="0" align="center" cellspacing="0" cellpadding="0">
<tr>
<td><table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="title1">Le pizze</td>
</tr>
<tr>
<td class="title3">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper eleifend libero eget feugiat. Proin rhoncus nunc ante, non cursus erat. Donec iaculis libero vel odio tempus eu interdum enim mollis. Suspendisse articleotenti. Nunc imperdiet magna et mauris vulputate porttitor vitae ac tortor.</p>


</p></td>
</tr>
<tr>
<td class="title2">LEGGI</td>
</tr>
</table></td>
</tr>
</table></div>
<div id="servizio"><table width="200" class="table" border="0" align="center" cellspacing="0" cellpadding="0">
<tr>
<td><table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="title1">Il servizio</td>
</tr>
<tr>
<td class="title3">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper eleifend libero eget feugiat. Proin rhoncus nunc ante, non cursus erat. Donec iaculis libero vel odio tempus eu interdum enim mollis. Suspendisse potenti. Nunc imperdiet magna et mauris vulputate porttitor vitae ac tortor.</p>


</p></td>
</tr>
<tr>
<td class="title2">LEGGI</td>
</tr>
</table></td>
</tr>
</table></div>
<div id="contatti"><table width="200" class="table" border="0" align="center" cellspacing="0" cellpadding="0">
<tr>
<td><table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="title1">La location</td>
</tr>
<tr>
<td class="title3">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper eleifend libero eget feugiat. Proin rhoncus nunc ante, non cursus erat. Donec iaculis libero vel odio tempus eu interdum enim mollis. Suspendisse potenti. Nunc imperdiet magna et mauris vulputate porttitor vitae ac tortor.</p>


</p></td>
</tr>
<tr>
<td class="title2">LEGGI</td>
</tr>
</table></td>
</tr>
</table></div>
</div>

[ac_socmel]

5 div e 10 tabelle
per allineare 5 elementi mi sembra leggermente ridondante
non ti basta una tabella a 5 celle?

e poi questo sarebbe html 3.2 non HTML5

[matteriv]

Ciao, ma visto che il DIV è su un layout a griglia fluida, devo poter avere le celle su una riga nella visualizzazione pc, su due righe nella visualizzazione tablet e su un unica colonna per lo smartphone; se uso una tabella con 4 celle non riesco a riposizionare le celle come nei tre casi...

[ac_socmel]

allora studia "display: table" e "display: table-cell"
qui ho provato a usarlo

[ybla82]

L'html che hai scritto nel post iniziale è corretto.
Poi te la devi giostrare con i css.

Per avere dei div su unica riga, devi assegnare ad ognuno la proprietà

float:left

Questa proprietà fa si che i div vengano posizionati nella posizione più a sinistra possibile:
nel caso specifico i div vengono affiancati tutti a sinistra orizzontalmente finchè c'è spazio nel div principale, dopo di che si va a capo.

Es.
+--------------------------+
|DIV1|DIV2|DIV3|DIV4|DIV5|
|DIV6 |
+--------------------------+


Se poi vuoi un disegno differente in base al tipo di supporto ( = differente larghezza della finestra di visualizzazione) devi usare i css 3.0.
In particolare vatti a vedere la keyword @media

Es.

@media screen and (max-width : 480px)