Layout 3Col: come dare sfondo alle col lat x stessa alt col centr ?

[pcf]

Salve, seguendo l'articolo "Layout in CSS con Layout-o-matic" di HTML.IT, stavo preparando appunto un layout a 3 colonne grazie alle funzionalità del "posizionamento degli oggetti" di cui beneficiano le proprietà dei CSS.
Le due colonne laterali riporteranno i link per la navigazione all'interno del portale, la colonna centrale i contenuti.

Il problema è il seguente:

lo sfondo delle due colonne laterali dovrà essere bianco dove sono riportati i link di navigazione e grigio (stessa colonna) nella parte rimanente dell'altezza fino al raggiungimento del footer .
Occuppando i contenuti che risiedono nella colonna centrale un' altezza maggiore di quella delle colonne laterali, la parte rimanente dell'altezza di quest'ultime rimane di uno sfondo bianco anzichè grigio come vorrei.
Un esempio di quello che vorrei realizzare è su http://blog.tiscali.it

Con un layout a tabelle sarebbe necessario dare uno sfondo comune a tutta la tabella, in questo modo la sfondo che si allunga per effetto dell'altezza della colonna centrale riempie automaticamente anche le colonne laterali anche se i i link di navigazione di quest'ultime occupano un'altezza inferiore rispetto ai contenuti centrali.

Ma con i CSS come posso fare ?
Esistono degli attributi della proprietà "BOX" che magari possono aiutarmi ?

Se nel file "prova.html " che fa riferimento a "File_esterno.css " provate ad inserire dei paragrafi di lunghezza maggiore nella colonna centrale (content) rispetto alle due colonne laterali ("sidebar_left" e "sidebar_right") capirete cosa voglio dire.

N.B.:
Gli sfondi delle due colonne laterali, in realtà dovrebbero essere di sfondo bianco dove ci sono i contenuti e di sfondo grigio dove non ci sono i contenuti fino al footer quando i contenuti centrali occupano un altezza maggiore di quelli laterali.
Se provate a togliere dai commenti /*.. */ i BACKGROUND-COLOR avranno i loro valore. Ma non è colorare la colonna dove ci sono i contenuti quello che voglio ma colorarla invece dove non ci sono .

Ringranzio anticipatamente tutti coloro che vorranno aiutarmi.

*************************************

--> File "prova.html"


<DIV id=container>
<DIV id=header>Paragrafo testo..</DIV>
<DIV id=sidebar_left>Paragrafo testo..</DIV>
<DIV id=sidebar_right>Paragrafo testo..</DIV>
<DIV id=content>Paragrafo testo..</DIV>
<DIV id=footer>Paragrafo testo..</DIV>
</DIV>


*************************************

--> File_esterno.css :

#container {
width: 760px;
\width: 780px;
w\idth: 760px;
BORDER-RIGHT: gray 1px solid;
BORDER-LEFT: gray 1px solid;
BORDER-TOP: gray 1px solid;
BORDER-BOTTOM: gray 1px solid;
margin: 10px auto;
margin-left: auto;
margin-right: auto;
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
PADDING-TOP: 10px;
}

#header {
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
MARGIN-BOTTOM: 5px;
PADDING-BOTTOM: 5px;
PADDING-TOP: 5px;
BACKGROUND-COLOR: rgb(213,219,225)
}

#content {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN-LEFT: 163px;
MARGIN-RIGHT: 163px;
/*BACKGROUND-COLOR:#FAEBD7; */
}

#sidebar_left {
float: left;
width: 144px;
\width: 154px;
w\idth: 144px;
margin: 0;
margin-right: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px;
/* background-color: rgb(235, 235, 235); */
}

#sidebar_right {
float: right;
width: 144px;
\width: 154px;
w\idth: 144px;
margin: 0;
margin-left: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px;
/*background-color: rgb(235, 235, 235); */
}

#footer {
clear: both;
PADDING-RIGHT: 5px;
margin-top: 5px;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 5px;
PADDING-TOP: 5px;
background-color: rgb(213, 219, 225);
}

*************************************

[antos]

semplicemente al dic "container" assegnaci il colore che vorresti dare come sfondo alle colonne laterali

[pcf]

Ma così si colorerà (dello stesso colore delle colonne laterali) anche la colonna centrale che dovrà rimanere bianca.

Nello stesso tempo le colonne laterali saranno colorate anche dove sono presenti i link di navigazione, il colore lo voglio solo sotto i link fino al footer.

[antos]

ma basta che nella colonna centrale imposti il colore di sfondo (background-color:#FFFFFF; ) solo ora mia accorgo che in content la riga di codice è commentata...

[pcf]

>> ma basta che nella colonna centrale imposti il colore di sfondo (background-color:#FFFFFF; )

Quindi ricapitolando:

Attribuisco lo sfondo grigio a "container" (contenitore totale delle 3 colonne) e lo sfondo bianco a "content" (colonna centrale)

Ok risolto il problema del bianco alla colonna centrale ma le colonne laterali saranno colorate anche dove sono presenti i link di navigazione, il colore lo voglio solo sotto i link fino al footer

[antos]

Originariamente inviato da pcf
>> ma basta che nella colonna centrale imposti il colore di sfondo (background-color:#FFFFFF; )

Quindi ricapitolando:

Attribuisco lo sfondo grigio a "container" (contenitore totale delle 3 colonne) e lo sfondo bianco a "content" (colonna centrale)

Ok risolto il problema del bianco alla colonna centrale ma le colonne laterali saranno colorate anche dove sono presenti i link di navigazione, il colore lo voglio solo sotto i link fino al footer

racchiudi i link in un altro blocco con lo sfondo bianco es:

.sfondoBianco{background-color:#FFFFFF;}
<div id=container> 
  <div id=header>Paragrafo testo..</div>  
  <div id=sidebar_left>
    <div class="sfondoBianco">
      
    </div>  
  </div> 
  <div id=sidebar_right>
       <div class="sfondoBianco">
      
    </div>  
  </div> 
  <div id=content>Paragrafo testo..</div> 
  <div id=footer>Paragrafo testo..</div> 
</div>

[pcf]

Grazie antos se stato gentilissimo e velocissimo

Copio il codice che mi hai suggerito e lo sperimento.. spero vada tutto bene.. poi ti faccio sapere ..

[pcf]

>> racchiudi i link in un altro blocco con lo sfondo bianco ...

Ho fatto come mi hai detto ma il risultato ottenuto è che il contenitore bianco (<div class="sfondoBianco">) nelle colonne laterali copre appunto di bianco la zona dove nelle colonne laterali si trovano i link, ma essendo lo sfondo grigio comune a tutte e tre le colonne (container=sfondo grigio), questo sfondo si trova per effetto del margin tra i diversi elementi anche nelle zone interstiziali, ossia:
- tra ognuna delle colonna laterali (spazio interno ed esterno, sx e dx) con quella centrale
- negli spazi (sopra e sotto) compresi tra le colonne e il footer e tra le colonne e l'header

il risultato estetico è bruttissimo !

Ho provato in un altro modo:

Contenitore generale (container): sfondo bianco
Solo le Colonne laterali: (sidebar left e right) sfondo grigio

Ma il problema rimane: nelle colonne laterali, il colore grigio sotto i link non arriva fino al footer perchè le "sidebar left" e "right" si fermano dove si ferma l'ultimo link che contengono, mentre la colonna centrale più lunga arriva fino al footer.
Quindi nelle colonne laterali: bianco in tutta altezza con un filetto grigio terminale sotto l'ultimo link.

Come posso risolvere il problema ?

[antos]

scusa ma nella classe sfondoBianco hai provato a scrivere
.sfondoBianco{widt:100%;margin:0px;}

se poi riesci a pubblicare la pagina in modo che possiamo vedere il problema

[pcf]

>> sfondoBianco{widt:100%;margin:0px;}

No Antos non avevo inserito "widt" e "margin"
ma non penso sia questa la soluzione, perchè il problema è dovuta all'altezza (e non larghezza --> widt) dello sfondo bianco che nelle colonne laterali non riesce ad arrivare alla stessa altezza della colonna centrale che arriva fino giù al footer.

>> se poi riesci a pubblicare la pagina in modo che possiamo vedere il problema

Attualmente i file dove ho effettuato questo lavoro non li ho su questo PC, se puoi, dammi adesso altri suggerimenti, altrimenti se proprio hai bisogno di guardare il lavoro pubblicato, non appena riuscirò a recuperare il lavoro ti avviso subito.

Ti ringranzio infinitamente per la tua disponibilità e cortesia