Layout 3 colonne a larghezza fissa: una a SX, una nel mezzo e una a DX

sark

Layout 3 colonne a larghezza fissa: una a SX, una nel mezzo e una a DX

Ciao a tutti, vorrei realizzare una pagina con 3 colonne a larghezza fissa

colonna 1 = 200px allineata a SX
colonna 2 = 400px centrata in mezzo allo schermo
colonna 3 = 200px allineata a DX

sono riuscito ad ottenere il risultato con il posizionamento assoluto, ma se visualizzo la pagina con una risoluzione bassa le 3 colonne si sovrappongono.

ho trovato vari esempi in alcuni siti web, ma non sono riuscito a risolvere il problema, potete aiutarmi?
ciao

axxe16

il posizionamento assoluto è un modo ma forse in questo caso è meglio usare il float.
fai le tre colonne con tre id più un contenitore che da la dimensione al tutto e lo centra:


#colonnaSx {float:left; width:200px;}
#colonnaDx {float:right; width:200px;}
#colonnaCentrale { margin-left:200px; margin-right:200px;}
#container {width:800px; margin:auto;}

L'ordine con cui inserire gli elementi nella pagina è importante:


<div id="container">
<div id="colonnaSx">loerm Ipsum...</div>
<div id="colonnaDx">loerm Ipsum...</div>
<div id="colonnaCentrale">loerm Ipsum...</div>
</div>

sark

@axxe16 said:

il posizionamento assoluto è un modo ma forse in questo caso è meglio usare il float.....
ciao, ho provato con il codice che mi hai dato ma non viene come vorrei io.
le 3 colonne sono centrate nel mezzo del display.
invece io vorrei la colonna sinistra appoggiata a sinistra
la colonna destra appoggiata a destra
e la colonna centrale larga tot nel mezzo

ad essere fluidi vorrei che fossero i 2 spazi bianchi in mezzo alle 3 colonne, in quanto le 3 colonne le vorrei di larghezza fissa.

io ho trovato esempi a 3 colonne ma le 3 colonne sono sempre adiacenti fra loro, invece io vorrei:

COLONNA SX--------------COLONNA CENTRALE-------------COLONNA DX

se il monitor fosse piu piccolo allora vorrei:

COLONNA SX------COLONNA CENTRALE-----COLONNA DX

mi spiego male lo so

axxe16

no no ora ti sei spiegato bene... allora si può fare sia con i float che con il posizionamento assoluto...
forse è concettualmente più semplce con il posizionamento assoluto...
allora:


<div id="container">
<div id="colonnaSx">loerm Ipsum...</div>
<div id="colonnaDx">loerm Ipsum...</div>
<div id="colonnaCentrale">loerm Ipsum...</div>
</div>

l'ordine in questo caso non è importante


#container {min-width:850px; position:relative}
#colonnaSx {position:absolute; left:0; top:0; width:200px;}
#colonnaDx {position:absolute; right:0; top:0; width:200px;}
#colonnaCentrale {width:400px; margin:auto;}

non l'ho provato ma ad okkio dovrebbe andare. Unico difetto, le colonne si sovraporranno su ie6 che non supporta min-width per risolvere la cosa devi usare un js che simula il comportamento di min-width. Esiste l'ottimo minMax() (un plugin di jQuery che puoi trovare qui: davecardwell.co.uk/javascript/jquery/plugins/jquery-minmax/ )

sark

è perfetto!!!!!
grazie 1000!!

axxe16

prego!