Layout pagina web con CSS

[orcim]

Ciao a tutti.

Avrei necessità di realizzare con un foglio di stile un layout web di questo tipo:

1) parte superiore header (testata);
2) sotto l'header due colonne left e right;
3) parte inferiore footer.

La particolarità di questo layout è che cliccando sul separatore delle due colonne centrali (left e right) la colonna sinistra (left) deve chiudersi e lasciare tutto lo spazio centrale alla colonna destra (right).

Ri-cliccando sul separatore delle due colonne centrali dovrei tornare alla situazione iniziale.

Ho pensato ad un foglio di stile, ma non sono esperto e non so se è possibile realizzare questa idea.

Grazie-

[Mich_]

Il layout e` un classico "due colonne con header".
Ci sono infiniti esempi in rete per cui non mi soffermo.

Il problema e` che tu vuoi che ad un evento "click" corrisponda uno sposamento delle percentuali di occupazione delle colonne.
Da un 50%-50% (o quanto e`, la logica e` la stessa) si deve passare ad un 99%-1% (o valori simili).

Purtroppo il CSS in questo momento non supporta l'evento click (potrebbe venir introdotto con i CSS3, ma ancora non mi risulta che alcun browser lo supporti).

Quindi l'evento click deve essere gestito da JS.

In pratica tu devi avere due tipi di layout: ad esempio:

HTML:
<div id="contenitore" class="metameta">
  <div id="left">
    ...
    <button ... onclick="toggle('contenitore');" /> 
  </div>
  <div id="right">
    ...
  </div>
</div> 

CSS:
html, body {
  width: 100%;
}
#contenitore {
  width: 100%; 
  overflow: ...;
}
#left {
  float: left;
}
#right {
  float: left;
}

.metameta #left {
  width: 49.9%;
}
.metameta #right {
  width: 49.9%;
}
.tuttoleft #left {
  width: 99%;
}
.tuttoleft #right {
  width: 0.8%;
}
/* NOTA: la somma fa sempre un po' meno di 100% per evitare errori di arrotondamento */


JS:
function toggle(cont) {
  var cN = getElementById(cont).className;
  cN = (cN == 'metameta') ? 'tuttoleft' : "metameta";
}

Spero di non aver fatto errori.

Sposto nel forum JS

[orcim]

tutto chiaro, grazie mille!