新手div的嵌套不会排列整齐

]#headertop{width:800px;height:20px;background:#CCFF77;}

#headertop ul{list-style:none;}

#headertop ul li{float:left;margin:10px auto 10px 0}



#headerbottom{width:800px;height:80px;background:#CCFF44}

#headerbottomleft{width:100px;height:80px;text-align:left;background:#CCFF55}

#headerbottomcenter{width:400px;height:70px;background:#CCFF33}

#headerbottomright{width:300px;height:70px;background:#CCFF66}



<div id="header">

    <!--页面头部-->

	<div id="headertop">

		<ul>

			<li>亲，欢迎来淘宝！请</li>

		</ul>

	</div>

	<div id="headerbottom">

		<div id="headerbottomleft"></div>

		<div id="headerbottomcenter"> </div>

		<div id="headerbottomright"></div>

	</div>

  </div>

[img=http://img.my.csdn.net/uploads/201212/09/1355025101_9227.jpg][/img我就是这样写的，怎么就是排列不整齐

------解决方案--------------------
 
#headerbottom{width:800px;height:80px;background:#CCFF44;clear:both;}
#headerbottomleft{width:100px;height:80px;text-align:left;background:#CCFF55; float:left;}
#headerbottomcenter{width:400px;height:70px;background:#CCFF33; float:left;}
#headerbottomright{width:300px;height:70px;background:#CCFF66; float:right;}