Altezza Wrapper

[Nedyc]

Salve a tutti, ho un sito strutturato in questa maniera:

<div id = 'page'> 
      <div id = 'header'> 
      
      </div> 
      <div id='wrapper'> 
             <div id='leftCol'> 
             
             </div> 
             <div id='center'> 
             
             </div> 
             <div id='rightCol'> 
             
              </div> 
     </div> 
     <div id='footer'> 
      
     </div> 
</div>

Con css impostato così:

body,html{ 
margin: 0px 0px 0px 0px; 
width:100%;
 height:100%; 
}

#page{ 
width:90%; 
margin-left:auto; 
margin-right:auto; 
} 

#header{ 
width:100%; 
height:200px; 
} 

#wrapper{ 
width:100%; 
height:100%; 
} 

#leftCol,#rightCol{ 
width:20%; 
float:left; height:100%; 
} 

#center{ 
float:left; 
width:60%; 
height:100%; 
} 

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

Il fatto è che se all'interno di lefColum o rightColumn o center metto troppe cose il footer si sballa e va a destra...qualcuno sa come posso fare?

[Mich_]

Anzitutto nel footer ti manca il clear (che "chiude" i float dei blocchi che lo precedono).

Poi definire height:100% e` una cosa che puo` avere effetti collaterali. Prova invece a definire
min-height: 100%.

Invece height dentro il blocchi flottati non va definito. Probabilmente la cosa migliore (se hai bisogno di definire un'altezza) e` posizionare il footer (vedi tra i "link utili") ed usare il trucco delle "false colonne" per gli sfondi

Ultima considerazione: la somma 20%+60%+20% dei vari blocchi flottati, in qualche caso (che dipende dall'arrotondamento che si ha nei browser) puo dara un valore che supera il 100%. Prova a definire rispettivamente:
width: 19.9%;
width: 59.9%;

[codencode]

Aggiungi al footer clear: both.

[Nedyc]

Grazie mille!