Volevo chiedervi una cosa che non riesco a risolvere riguardo i css.
A prescindere dal fatto che il layout sia brutto o meno… vorrei fare in modo di avere lo stesso risultato dello screenshot qui linkato.

http://win.fuorirignano.com/layout3/ss_073.jpg


su questa pagina.

http://win.fuorirignano.com/layout3/pagina.html

Cioè…

1: altezza che è si adatta alla pagina (quindi se nella pagina i contenuti arrivano fino a metà il div deve arrivare fino in fondo)
- e per questo basta il container principale a capo di tutto con {height: 100%;}
2: i tre box sotto la testata devono adattarsi anche loro all’altezza massima possibile (e se imposto l’altezza al 100% mi applica la stessa altezza del container, non perché ci sia una correlazione ma perché prende in riferimento l’intera altezza della pagina)

3: la fascietta del footer in basso deve sempre essere in basso (nell’esempio di prima… se la pagina contiene contenuti fino a metà il footer deve comunque toccare il fondo).

Il codice html che ho usato è il seguente:

<div id="container">
<div id="header">
testata
</div>
<div id="contBox">
<div id="colLeft">
colonna 1
</div>
<div id="colCenter">
Colonna centrale
</div>
<div id="colRight">
colonna 2
</div>
</div>
<div id="footer">
footer
</div>
</div>


Mentre il codice CSS è questo:

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

#container{
height: 100%;
margin: 0 auto;
width: 806;
border-left: 1px #000 solid;
border-right: 1px #000 solid;
text-align: left;
}

#header{
border-bottom: 1px #000 solid;
width: 100%;
height: 150px;
}

#contBox{
height: auto;
}

#colLeft, #colRight, #colCenter{
float: left;
}

#colLeft, #colRight{
width: 200;
}

#colCenter{
width: 400;
border-left: 1px #000 solid;
border-right: 1px #000 solid;
}

#footer{
width: 100%;
height: 20px;
}

A quanto pare il problema sia l’altezza delle tre colonne centrali… bho, non capisco…
Grazie in anticipo per l’aiuto.