div di diversa altezza su diversi browser

[Emulman]

ciao a tutti..c'è una cosa che mi sta facendo disperare..sto facendo un sito per una ONLUS...tutto in HTML5-CSS3. se guardate questa pagina http://www.appsontheweb.net/bottega/index.php?ok=2 mi sapete dire perchè sotto chrome si vede tutta intera mentre in firefox-opera si vede tutta tagliata? da tenere presente che la parte bianca è così rappresentata:

#mainBox {
  width: 90%;
  background-color: #FFFFFF;
  color: #000000;
  margin: 0px auto;
}

#leftBox {
  float: left;
  height: 100%;
  background-color: #5D5D5D;
}

#rightBox {
  float: left;
  width: 90%;
  background-color: #FFFFFF;
  color: #000000;
  text-align: center;
  border: 5px dotted red;
}

#info {
  width: 100%;
  background-color: #E0E0E0;
  padding: .3em;
  vertical-align: bottom;
}

#main {
  width: 100%;
  height: 95%;
  overflow: auto;
  border: 5px solid black;
}

(i border sono messi solo per controllo). Da tener presente che mainbox è il contenitore principale, leftbox per il menu a sinistra, rightbox per la pagina, info per la scritta in basso e main per un tag object in rightbox contenente la pagina intera

[ResianTaxidrive]

potresti assegnare a #rightbob un width:89% e float:right;
Perchè hai messo l'altezza a mainBox?

[Emulman]

perchè per me mainBox è un contenitore di tutti gli altri div, come se fosse un iframe...quindi gli altri div dovrebbero adeguarsi alle dimensioni massime di mainBox

[ResianTaxidrive]

allora quantomeno devi assegnare un overflow:scroll a #mainBox