Ciao a tutti.
Ho bisogno di realizzare una pagina con layout a tre colonne.
Desidererei però che la colonna centrale si adattasse al contenuto delle due colonne adiacenti fino ad occupare anche il 100% della pagina.
Vorrei cioè che le colonne laterali occupino al massimo il 25 per cento (circa 200px) della larghezza della pagina ma che risultino invisibili se all'interno delle colonne non c'è contenuto, lasciando quindi lo spazio alla colonna centrale (in questo caso cioè si otterrebbe un layout a colonna singola ma con le dimensioni della pagina).
Avrei individuato la soluzione nell'utilizzo di una tabella. Così:
<div id="Contenuti">
<table>
<tr>
<td class="Sinistra"></td>
<td class="Centro"></td>
<td class="Destra"></td>
</tr>
</table>
</div>
mentre questo è il CSS:
#Contenuti{
width:950px:
margin:auto
}
.Sinistra{
width:200px;
vertical-align:top;
}
.Centro{
width:100%;
vertical-align:top;
}
.Destra{
width:200px;
vertical-align:top;
}
Il risultato non è lontano da quello che vorrei ottenere.
Purtroppo le colonne laterali, che dovrebbero avere una larghezza di 200 px (secondo quanto previsto dal CSS)nel caso in cui ci sia contenuto, in realtà non presentano la larghezza stabilita ma sono molto strette (una cinquantina di px) e non mi spiego perché.
C'è qualcuno che gentilmente può indicarmi se è possibile risolvere il problema che ho proposto e se sono sulla strada giusta o se devo cambiare direzione?
Grazie per la gentile e paziente risposta.
Rispondi quotando
