CSS 浮动真蛋疼 大虾求助

写的一个网页计算器页面出问题了
代码如下
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>2列固定宽度左窄右宽型+头部+导航+尾部——</title>
<style type="text/css">
body { font-family:Verdana; font-size:14px; margin:0;}
#container {margin:0 auto; width:315px;}
#header { height:30px; background:#6cf; margin-bottom:5px;}
#menu { height:30px; background:#09c; margin-bottom:5px;
#mainContent { height:100px; margin-bottom:5px;}
#sidebar { float:left; width:55px; height:145px; background:#9ff;}
#content { float:left; width:255px; height:145px; margin-left: 5px;background:#cff;}
.side {
background-color: #666;
height: 30px;
width: 45px;
margin-top: 5px;
margin-left: 5px;

}
input {
color: #03F;
height: 30px;
width: 45px;
}
.cont {
color: #000;
float: left;
height: 30px;
width: 45px;
margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
clear: none;
}
</style>
</head>
<body>
<div id="container">
  <div id="header">This is the Header</div>
  <div id="menu">This is the Menu</div>
  <div id="mainContent">
    <div id="sidebar">
      <div class="side"><input type="button"  value="MC" /></div>
      <div class="side"><input type="button"  value="MR" /></div>
      <div class="side"><input type="button"  value="MS" /></div>
      <div class="side"><input type="button"  value="M+" /></div>
    </div>
    
    <div id="content">
    <div class="cont"><input type="button"  value="7" /></div>
    <div class="cont"><input type="button"  value="8" /></div>
    <div class="cont"><input type="button"  value="9" /></div>
    <div class="cont"><input type="button"  value="/" /></div>
    <div class="cont"><input type="button"  value="sqrt" /></div>
    <div class="cont"><input type="button"  value="4" /></div>
    <div class="cont"><input type="button"  value="5" /></div>
    <div class="cont"><input type="button"  value="6" /></div>
    <div class="cont"><input type="button"  value="*" /></div>
    <div class="cont"><input type="button"  value="%" /></div>
    <div class="cont"><input type="button"  value="1" /></div>
    <div class="cont"><input type="button"  value="2" /></div>
    <div class="cont"><input type="button"  value="3" /></div>
    <div class="cont"><input type="button"  value="-" /></div>
    <div class="cont"><input type="button"  value="1/x" /></div>
    <div class="cont"><input type="button"  value="0" /></div>
    <div class="cont"><input type="button"  value="+/-" /></div>
    <div class="cont"><input type="button"  value="." /></div>
    <div class="cont"><input type="button"  value="+" /></div>
    <div class="cont"><input type="button"  value="=" /></div>
    </div>
  </div>
</div>
</body>
</html>在dreamweaver设计视图没问题 都是正常排布
但是在浏览器中却乱了 
  求大虾解释  
 感觉是浮动那块出了问题