layout fisso/variabile

[lilo]

Devo realizzare un layout con queste caratteristiche :
parte centrale con larghezza fissa a 500 pixel
la parte destra e sinistra devono ricoprire l'intera ampiezza in orizzontale, quindi nn devono avere una larghezza fissa (tipo 140 pixel in questo caso) ma in percentuale.

Come posso fare perchè il layout si adatti a diverse risoluzioni monitor ?

grazie per le vs. risposte in merito

[lilo]

Devo adattare una soluzione javascript per ogni risoluzione monitor ?
come posso fare per riempire orizzontalmente il sito ?

[Mich_]

Prova a dare
width: auto;
alle due colonne laterali (poi mettici anche qualcosa che riempia lo spazio orizz, tipo una scritta che vada ad occupare piu` di una riga)

[lilo]

Questo il veccho layour a 3 colonne css

#corpo {
margin: 0 auto;
padding: 0;
position: relative;
height: 100%;
background-image: url("../img/sfondo5.gif");
/*background: #ccc;*/
width: 840px;
}
#dx {
position: absolute;
top: 117px; right: 0;
width: auto;
}
#sn {
position: absolute;
top: 117px; left: 0;
width: auto;
}
#centro {
/*background: #ccc;*/
position: relative;
margin: 0 auto;
width: 500px;
}

con 2 layout assoluti a lato e uno relativo al centro, come negli es. di constile.
Come dovrei adattarlo al tuo tipo di layout ? Avevi pensato a 3 layout relativi tutti con float ?

Fammi sapere
ti ringrazio per l'aiuto

[Mich_]

Io sono convinto che usare posizionamenti assoluti renda il tutto piu` complesso.

Quindi conviene lasciare flottare tutto (compreso il contenitore, per problemi con qualche browser):

<div id="corpo">
  <div id="sn">

qualcosa di lungo che occupi piu` di 150px in larghezza</p> ... </div>
  <div id="centro"> .... </div>
  <div id="dx">

qualcosa di lungo che occupi piu` di 150px in larghezza</p> ... </div>
</div>

* { 
  padding: 0;
  margin: 0;
  border: 0;
}
#corpo {
  margin: 0 auto; /* non so se serve */
  height: 100%;
  background-image: url("../img/sfondo5.gif");
  float: left;
}
#dx {
  width: auto;
  float: left;
  height: 100%;
  backgorund: f88; /* per provare dimensioni */
}
#sn {
  width: auto;
  float: left;
  height: 100%;
  backgorund: 8f8; /* per provare dimensioni */
}
#centro {
  width: 500px;
  height: 100%;
}