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?