Ho un problema che mi sta facendo impazzire.

Eccovi la mia pagina:

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <link type="text/css" rel="stylesheet" href="mainstyle.css" />
</head>

<body>
  <div id="struttura">
    <div id="top"></div>
	<div id="welcome"></div>
	<div id="contenuto">
	 <div id="menu"></div> 
	 <div id="posts"></div> 
	</div>
  </div>
</body>

</html>
Ed eccovi il CSS:

codice:
body {
  background-color : #CCCCCC;
  color : #000000;
  margin : 20px;
  font : 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
  text-align : center;
}

#struttura {
  color : #000000;
  width : 830px;
  margin : 20px auto;
  text-align : left;
}

#top {
  background-image : url(images/struttura/top.jpg);
  height : 131px;
}

#welcome {
  background-image : url(images/struttura/welcome.jpg);
  height : 90px;
}

#contenuto {
  width : 830px;
  height : 500px;
  voice-family : inherit;
}

#menu {
  background-color:#0000FF;
  width : 138px;
  height : 336px;
  float : left;
  voice-family : inherit;
}

#posts {
  background-color:#FF0000;
  width : 692px;
  height : 336px;
  margin : 0px 0px 0px 138px;
  voice-family : inherit;
}
Il problema è che con dreamweaver e firefox tutto funziona perfettamente, mentre con IE, i due div "menu" e "posts" che dovrebbero essere uno a fianco all'altro, uno a destra e uno a sinistra, appaiono sballati: sopra "menu" e sotto "posts"

Perchè mai?? E' un bug del browser? Sto sbagliando qualcosa nel css? Come posso sistemare?

Grazie