Layout a tre colonne di altezza uguale fino a fondo pagina, senza soluzione

[Luca_pluatrco]

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:

#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:

<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>

[Mich_]

Non e` possibile aiutarti con le premesse che hai fatto.

In pratica ha gia` scartato a priori tutte le possibilita`.

1. Perche` hai scartato le "false colonne"? Se le colonne hanno larghezza fissa, sono la soluzione piu` comoda e semplice.

2. Perche` vuoi usare i posizionamenti assoluti? Sono una delle cose piu` difficili da usare, e quelli che rendono il layout bloccato, per cui capitera` sicuro che in qualche browser o risoluzione avvengano delle sovrapposizioni.
Un layout a colonne, al 99% si realizza mediante i float. Perche` lo vuoi scartare?

[Luca_pluatrco]

E' che ho provato con le false colonne, ma i risultati non erano soddisfacenti.
Le colonne laterali sono larghe 200px e quella centrale è liquida. Avevo provato con i float, ma le colonne mi si sballavano tutte (quella centrale finiva sotto quella di sinistra).

Invece passando al posizionamento assoluto tutto era stato sistemato in un attimo. Mi sembra quindi tu consigli fortemente di usare i float...

In quel caso quali dovrebbero essere le dimensioni della immagine da usare per le false colonne?
Alta 1px, con i primi 200px di un colore(colonna sx) e quanti per la colonna centrale e quella di destra?

Grazie

[Mich_]

Tanto per fare una prova: vedi cosa succede se aumenti il font: prova (in FF1-2 o Opera) a premere un paio di volte control_+ : e` la situazione in cui si trova chi definisce i font un po' piu` grandi dello standard.

Se vuoi due colonne fisse laterali ed un centro fluido, la soluzione dovrebbe esserci nelle raccolte di layout.
Credo che sia una cosa del genere:

<div id="content">
  <div id="contentin"
     <div id="left">
       


         LEFT PANEL - 	220px 


         Siamo sulla ... pagnia aerea richieste
       </p>
     </div>  
     
     <div class="middle">
       


         MAIN PANEL AREA -  LIQUID  - 


 	     Siamo sulla ... chieste
       </p>       
     </div> 
       
     <div id="right">
       


         RIGHT PANEL - 200px  - 

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

CSS:

html, body {
  width: 100%;
}
#content {
  width: 100%;
  background: url(riga200.gif) repeat-y top left;
}
#contentin {
  width: 100%;
  background: url(riga200.gif) repeat-y top right;
}
#contentin:after {
  clear: both;
  ... vedi [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float
}
#left {
  width: 220px;
  float: left;
}
#right {
  width: 220px;
  float: right;
}
#middle {
  margin 0 220px;
}

L'immagine riga200.gif e` una immagine di una riga e 220 px di larghezza, inmodo da coprire ciascuna delle due bande: e` posizionata una volta a sinistra e una a destra. Purtroppo coni CSS2 non si puo` mettere piu` di uno sfondo per ogni blocco, per cui occorre inserire un blocco in piu`.

Ho fatto i due blocchi laterali della stessa larghezza: se servono diversi occorre modificare alcuni parametri e avere due immagini diverse.

[Luca_pluatrco]

Grazie mille Mich, ora le colonne hanno tutte la stessa altezza.

Solo una cosa mi lascia perplesso: in Firefox sotto l'header ho circa 10px di spazio bianco (mentre con IE 7 le tre coonne gli sono adiacenti).

Altra cosa: come posso ottenere ora che le colonne si estendano fino a fine pagina? In quanto ora si estendono solo in base alla colonna più lunga.

Grazie di nuovo!!!

Posto di seguito il codice completo CSS e HTML:

CSS

body{height:100%; width:100%; margin:0; padding:0; text-align:center;font-family: arial,sans-serif; font-size: 80%;}

#container	
{
} 


/*-------------------   HEADER    --------------------------------------*/
#header	
{
position:relative;
height:108px;
border:1px solid #aaa;
} 

#logo
{
width: 370px;
height:108px;
float:left;
background: url(../../img/VEFNewHome.gif);  
background-color: #cdc;
background-position:top left;
background-repeat:no-repeat;
}


#linkMenu
{
position:absolute;
float:right;
line-height:0.9em;
top:10px;
right:20px;
text-align:right;
}

#linkMenu ul
{

width:190px;
margin:0;
padding:0;
}

#linkMenu ul li
{
display:inline;
list-style: none;
margin:0;
padding:0;
}

#linkMenu ul li a
{
display:inline;
padding:2px;
text-decoration: none;
}

/*---------------------------------*/

#content
{
width:100%;
background: #ccddff url(../../img/imgSfondo.jpg) repeat-y top left;
text-align:left;
}

#contentWrapper
{
width:100%;
background: url(../../img/imgSfondo.jpg) repeat-y top right;
}


#contentWrapper:after
{
display: block; 
visibility: hidden;
content: "."; 
height: 0; 
clear: both;	
}

#left 
{
float:left;
width: 200px;
padding:0 5px;
}


.middle
{
padding: 0 10px;
margin: 0 220px;
}

#right 
{
width:200px;
float:right;
padding:0 5px;
}

#footer
{
clear:both;
margin-top: 5px;
padding:0;
border: 1px dashed black;
background: #66ccdd;
}

HTML

<body>
<div id="container">

<div id="header">  
    <div id="logo"></div>
    <div id="linkMenu">
        <ul>[*]Home[*]link A[*]link B[/list]
    </div>
</div>        


<div id="content">
    <div id="contentWrapper">
         <div id="left">
           


             LEFT PANEL - 	200px 


             Siamo sulla il giorno lavorativo successivo....
           </p>
         </div>          
           
         <div id="right">
           


             RIGHT PANEL - 200px  - 

with some contentwith some contentwith some contentwith some contentwith
           </p>
         </div>   
         
         <div class="middle">
           


             MAIN PANEL AREA -  LIQUID  - 


 	         Siamo sulla il giorno lavorativo...
           </p>       
         </div>         
           
    </div>
</div>  <%-- content  --%>


<div id="footer">
   


     FOOTER..if needed
   </p>
</div>     

</div><%-- container  --%>
    
</body>
</html>

[Mich_]

Altra cosa: come posso ottenere ora che le colonne si estendano fino a fine pagina? In quanto ora si estendono solo in base alla colonna più lunga.

La cosa piu` semplice e` inserire un min-height, che puo` avere misure in px o in %.

Nel tuo caso puoi provare ad inserire nel contentWrapper:
min-height: 70%;
E` un po` un ripiego, ma potrebbe essere sufficiente.

Ci sono anche altri metodi, che pero` complicano un po' sia la marcatura che il CSS. Li puoi cercare tra i layout (vedi "link util").

in Firefox sotto l'header ho circa 10px di spazio bianco (mentre con IE 7 le tre coonne gli sono adiacenti).

Non mi piace l'uso dei posizionamenti nella header: andrebbero eliminati come nel corpo.
E non mi piace l'uso contemporaneo di position:absolute e di float: le due cose sono in contraddizione

[Luca_pluatrco]

Tuttavia min-height non è supportato da IE...provero' a modificare l'header.

Il fatto di avere le colonne lunghe quanto la pagina è un'esplicita riciesta del mio "boss"...questo è il motivo per cui mi sto spaccando la testa per riuscire ad avere colonne uguali e lunghe fino a fine pagina....

[Mich_]

Tuttavia min-height non è supportato da IE...

Si`, ma c'e` l'hack:

height: auto :important;
height: 70%;
min-height: 70%;

[Luca_pluatrco]

Dopo un po' di tentativi sono riuscito ad ottenere il layout desiderato:

CSS

 * html body{ /*IE6 hack*/ padding: 0 150px 0 200px; /*Set value to (0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/}
 
 * html #maincontent{ /*IE6 hack*/ height: 100%; width: 100%; }

 body {margin:0; padding:0; border: 0; overflow: hidden; /*height: 100%;*/ max-height: 100%; background:white; }
 
 #header {position: absolute; top: 0; left: 0; width: 100%; height: 90px; overflow: hidden; background:#fffff3 url(../../img/header.jpg) no-repeat; color: black}
 
 
 /*-----------------  GLOBAL LINKS  -----------------*/
 
#linkMenu
{
position:absolute;
/*float:right;*/
line-height:0.9em;
top:10px;
right:20px;
text-align:right;
}

#linkMenu ul
{

width:190px;
margin:0;
padding:0;
}

#linkMenu ul li
{
display:inline;
list-style: none;
margin:0;
padding:0;
}

#linkMenu ul li a
{
display:inline;
padding:2px;
text-decoration: none;
}
/*---------------------------------------*/
 
 
 /*#headertop {height:60px; font:22pt Corbel; color:white; padding-left:20px; padding-top:26px; margin-bottom:0px} */
 
 #maincontainer {position: absolute; top: 90px; left: 0; right: 0; bottom: 0; overflow: auto;/* <---*/ background: #fff}
 
 #framecontentLeft, #framecontentRight{height: 100%; overflow: hidden; background-color:#efefac; color:black; font:7.5pt verdana; line-height:13px}
 
 #framecontentLeft{ position: absolute; top: 0px; left: 0; width:230px; background-color:#efefac;}
 
 #framecontentRight{ position: absolute; left: auto; right: 0; width: 250px; background-color:#ffff99;}
 
 #maincontent{ position:fixed; top:90px; left:230px; right:250px; bottom:0; /*overflow:auto; <-- Cuase the scroll bar in the content area*/ background:white; font:8pt verdana; line-height:150%; border-right:1px dashed #e0e0e0}
 
 .innertube{margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/}

HTML:

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="COLS3.aspx.cs" Inherits="COLS3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Left and Right Frames Layout</title>
<link rel="Stylesheet" type="text/css" href="App_Themes/general_theme/3COLS.css" />

<script type="text/javascript">
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
 for (var i=0; i<words; i++)
  document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
</head>

<body>
<div id="header">
    <div id="linkMenu">
        <ul>[*]Home | [*]link A[*]link B[/list]
    </div>    
</div>


<div id="maincontainer">

    <div id="framecontentLeft">
         <div class="innertube">
              <script type="text/javascript">filltext(22)</script></p> 
         </div>
    </div>

    <div id="framecontentRight">
        <div class="innertube">
            <%----%>

<script type="text/javascript">filltext(22)</script></p>
        </div>
    </div>

    <div id="maincontent">
        <div class="innertube">
            <h2>Dynamic Drive CSS Library</h2>
            

<script type="text/javascript">filltext(35)</script></p>
            

Credits: Dynamic Drive CSS Library</p>
        </div>
    </div>

</div>
</body>
</html>

In questo modo riesco anche ad avere le colonne fino a fine pagina. In particolare per quest'ultimo aspetto avevo risolto impostando (in altri layout) haieght:100% per i vari container. Tuttavia nel caso di header veniva creata la scroll bar anche se non necessaria e lo spazio "sotto" la pagina era esattamente la prozione occupata dall'header.

Come sarebbe possibile evitare questo? C'è una soluzione generale (Tipo usare margin-bottom negativi)?

Grazie

[X_Ch4n]

scusate, ma se volessi inserire uno sfondo nella colonna centrale come posso fare?
vorrei utilizzare un'immagine 1x1px in repeat, ma non riesco.
Il layout e' praticamente identico a quello presentato in questo thread, un container esterno con un immagine sfondo a sinistra, un'altro con immagine float a destra ecc... praticamente identico...
Avevo pensato ad una struttura container a 3 livelli:
container esterno con lo sfondo della colonna centrale, il secondo annidato con immagine a sinistra e il terzo a sua volta annidato con immagine a destra, ma non va lo stesso....