Ciao,

ho provato varie soluzioni (attingendo anche dall'appposita sezione di link utili del forum) per cercare di ottenere un layout (con position:absolute) dove le tre colonne siano tutte alte uguali fino a fine pagina a prescindere dal contenuto.

[1] Inizialmente avevo pensato di usare height:100% (per ogni colonna e per il relativo contenitore), ma poi veniva creata una porzione in basso pari all'altezza dell'header (quindi veniva visualizzato lo scrollbar anche se non ve ne sarebbe stato bisogno).

[2] Per quanto riguarda l'utizzo di una immagine di sfondo per simulare lo sfondo della colonna non penso sia applicabile al mio contesto. Ho infatti creato un layout a tre colonne che costituisce un template per le pagine di un portale. All'interno di tali colonne vengono caricati elementi legacy (Rad controls, ASP.NET controls) e fra ogni colonna vi è uno spazio di circa 10px.

[3] Come ultimo approccio ho tentato la tecnica che prevede di usare un padding-bottom negativo e un margin-bottom positivo insieme alla proprietà overflow:hidden. In tal modo le colonne sono tutte della stessa altezza, ma terminano quando il contenuto di quella centrale termina(non quindi a fine pagina come vorrei io), in quanto è l'unica che non ha position:absolute. Inoltre funziona bene solo con un foat, mentre le colonne sololunghissime con un posizionamento assoluto.

Qualcuno saprebbe suggerirmi una soluzione (event. correlata di un esempio) per risolvere questo semplice (in apparenza) problema per un layout a tre colonne con posizionamento fisso?

GRAZIE

Qui il codice CSS:
codice:
#content
{
position:relative;
overflow:hidden;    /*Without this rule colums are not "cutted"*/

}

#left 
{
position:absolute; 
width: 220px;
top:0;
left:0;

padding-bottom: 2000px;
margin-bottom: -1995px;
overflow:hidden;

}


.middle
{
margin: 0 220px 0 230px;

padding-bottom: 2000px;
margin-bottom: -1995px;
overflow:hidden;

}

#right 
{
position:absolute;
top:0px;
right: 5px;
width:200px;

padding-bottom: 2000px;
margin-bottom: -1995px;
overflow:hidden;

}
E qui il codice HTML:
codice:
<div id="content">
     <div id="left">
       


         LEFT PANEL - 	220px 


         Siamo sulla il giorno lavorativo successivo la presente pubblicazione ritornare alla compagnia aerea richieste ---          Siamo sulla il giorno lavorativo successivo la presente pubblicazione ritornare alla compagnia aerea richieste
       </p>
     </div>   
     
     <div class="middle">
       


         MAIN PANEL AREA -  LIQUID  - 


 	     Siamo sulla il giorno lavorativo successivo la presente pubblicazione ritornare alla compagnia aerea richieste
       </p>       
     </div>
       
     <div id="right">
       


         RIGHT PANEL - 200px  - 

with some contentwith some contentwith some 
       </p>
     </div>
    </div>