高手帮我看看好吗？怎么显示的排列不整齐啊！
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#zong{width:500px}
div#danzong {background-color:#99bbbb;}
div#zuozong {background-color:#ffff99;height:200px;width:150px;float:left;}
div#xiazong {background-color:#EEEEEE;height:200px;width:200px;float:in;}
div#youzong {background-color:#ffff99;height:200px;width:150px;float:right;}
div#dizong {background-color:#99bbbb;clear:both;text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0;font-size:18px;}
ul {margin:0;}
ol {margin:0;}
li {list-style:none;}
</style>
</head>
<body>
<div id="zong">
<div id="danzong">
<h1>58伯乐人才网</h1>
</div>
<div id="zuozong">
<h2>简历</h2>
<ul>
<li>招聘</li>
<li>同城</li>
<li>二手</li>
</ul>
</div>
<div id="xiazong">显示内容（测试代码）</div>
<div id="youzong">
<h2>热门职位</h2>
<ol>
<li>测试工作</li>
<li>测试工作</li>
<li>测试工作</li>
<li>测试工作</li>
</ol>
</div>
<div id="dizong">Copyright www.58bole.com</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#zong{width:500px}
div#danzong {background-color:#99bbbb;}
div#zuozong {background-color:#ffff99;height:200px;width:150px;float:left;}
div#xiazong {background-color:#EEEEEE;height:200px;width:200px;float:in;}
div#youzong {background-color:#ffff99;height:200px;width:150px;float:right;}
div#dizong {background-color:#99bbbb;clear:both;text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0;font-size:18px;}
ul {margin:0;}
ol {margin:0;}
li {list-style:none;}
</style>
</head>
<body>
<div id="zong">
<div id="danzong">
<h1>58伯乐人才网</h1>
</div>
<div id="zuozong">
<h2>简历</h2>
<ul>
<li>招聘</li>
<li>同城</li>
<li>二手</li>
</ul>
</div>
<div id="xiazong">显示内容（测试代码）</div>
<div id="youzong">
<h2>热门职位</h2>
<ol>
<li>测试工作</li>
<li>测试工作</li>
<li>测试工作</li>
<li>测试工作</li>
</ol>
</div>
<div id="dizong">Copyright www.58bole.com</div>
</div>
</body>
</html>
