Cercando di modificare il mio sito d'e-commerce su Zen-Cart mi sono accorto che le colonne di sinistra e destra NON hanno la stessa altezza della colonna centrale nonostante il valore 100%. Ho fatto quindi una prova basilare di questo tipo :

codice:
<html>
<head>
<title>Prova</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="sx">Colonna SX</div>
<div id="centro"> 
  <div> Centro</div>
</div>
<div id="dx">Colonna DX</div>
</body>
</html>
e il relativo foglio di stile :
codice:
#body, html {
color: #FFFFFF;
height: 100%;
margin: 0;
border: 0px solid #FFFFFF;
}

#sx {
float: left;
background-color: #000000;
height: 100%;
width: 100px;
margin:0 auto;
vertical-align: top;
padding: 0;
border: 0px solid #FFFFFF;
}
#centro {
float: left;
background-color: #00FFFF;
width: 760px;
height: 1200px;
margin: 0 auto;
vertical-align: top;
border: 10px solid #FFe000;
}
#dx {
float: left;
width: 100px;
background-color: #FF0000;
height: 100%;
margin-left: 0;
margin-right: 0;
margin:0 auto;
vertical-align: top;
padding: 0;
border: 0px solid #FFFFFF;
}
Io mi aspettavo che le colonne SX e DX avessero anch'essa l'altezza 1200 pixel in quanto è impostato height: 100% invece si fermano + o - all'altezza dello schermo...scrollando, infatti, non ci sono +

Dove ho sbagliato ?

GRAZIE