div left middle right 在DW8里面散架了 求大神指点解决方案

div left middle right 在DW8里面散架了 求大神指点
<div id="main">
  <div id="left">
  此处显示 id "left" 的内容</div>

  <div id="middle">
  此处显示 id "middle" 的内容</div>

  <div id="right">
  此处显示 id "right" 的内容</div>

此处显示 id "main" 的内容</div>





body {
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
text-align: center;
}
#top {
height: 90px;
width: 940px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#main {
text-align: left;
width: 940px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
clear: both;
}
#left {
text-align: left;
width: 140px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
float: left;
}
#middle {
text-align: left;
width: 700px;
float: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
  float: left;
height: 400px;
}
#right {
float: right;
width: 100px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
float: left;
}


------解决方案--------------------
<div id="top"></div>
<div id="main">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div class="clear"></div>
</div><!-- main end -->



body {
margin: 0px;
padding: 0px;
}
#top {
width: 940px;
height: 90px;
margin:0 auto;
}
#main {
width: 940px;
margin:0 auto;
}

#left {
float: left;
width: 140px;
}
#middle {
float: left;
width: 700px;
}
#right {
float: right;
width: 100px;
}
.clear { clear:both;}

------解决方案--------------------
楼上正解，或者是按照你的CSS不变，但是把HTML结构改成这样

HTML code

<div id="container">
    <div id="left">此处显示 id "left" 的内容</div>
    <div id="middle">此处显示 id "middle" 的内容</div>
    <div id="right">此处显示 id "right" 的内容</div>
    <div id="main">此处显示 id "main" 的内容</div>
</div>