大伙帮我看看，为什么这段DIV排出来的版面为是这样的啊？
HTML源代码：
<!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=gb2312 " />
<style type= "text/css ">
#header{
MARGIN: 0px;
BACKGROUND: #ccd2de;
WIDTH: 580px;
HEIGHT: 60px;
border-top-width: 100px;
border-right-width: 100px;
border-bottom-width: 100px;
border-left-width: 100px;
border-top-color: #FF0000;
border-right-color: #FF0000;
border-bottom-color: #FF0000;
border-left-color: #FF0000;
}
#mainbox {
MARGIN: 0px;
WIDTH: 580px;
BACKGROUND: #FFF;
}
#sidebar{
FLOAT: left;
MARGIN: 2px 2px 0px 0px;
PADDING: 0px;
BACKGROUND: #F2F3F7;
WIDTH: 170px;
}
#menu{
FLOAT: right;
MARGIN: 2px 0px 2px 0px;
PADDING:0px 0px 0px 0px;
WIDTH: 400px;
BACKGROUND: #ccd2de;
}
#content{
FLOAT: right;
MARGIN: 1px 0px 2px 0px;
PADDING:0px;
WIDTH: 400px;
BACKGROUND: #E0EFDE;
}
#footer{
CLEAR: both;
MARGIN: 0px 0px 0px 0px;
PADDING: 5px 0px 5px 0px;
BACKGROUND: #ccd2de;
HEIGHT: 40px;
WIDTH: 580px; }
</style>
</head>
<body>
<div id= "header "> </div>
<div id= "mainbox ">
<div id= "menu "> </div>
<div id= "sidebar "> </div>
<div id= "content "> </div>
</div>
<div id= "footer "> </div>
</body>
</html>
为什么menu会在左边，而sidebar和content在右边，而sidebar又在content的上方？
对DIV的CSS 浮动属性如何理解？
大家帮我解释一下啊？谢谢了。
[解决办法]
现在知道你为什么每次都吝啬的只给问题点数1分了，因为你再基础的问题你都会上这来问
从不会经过自己大脑去思考的，你这样学习有什么意义？
罗嗦了……
还有，你问问题也是错误的，menu右浮动，怎么会跑到左边？你问这个问题前你测试过吗？
苏昱的css2.0.chm那手册不会的知识点上面查，查了再不会就google、baidu搜，实在搜不到就问，明白？
又罗嗦了……
