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>测试 </title>
<style>
#content 
{       
margin: 0 auto;
padding: 40px 30px 10px 30px;
background: #000000;
border:#00FF00 thin solid;
}.leftbar
{
  border:#0000FF thin solid;
  width:200px;   
  float:left; 
  margin-bottom:20px;
}
.rightbar 
{
  border:#009966 thin solid;
  width:200px;    
  float:left;
  
}
</style>
</head><body>  
  <div id="content">
    <div class="leftbar">东方</div>
    <div class="rightbar">士大夫</div> 
  </div>
</body> 
<div style="clear: both;">&nbsp;</div>
<div id="footer" style="text-align:center"><p>asdfasdfasdfasfsafsafs</p></div></html>大家帮忙看下，为什么content的边框没有将leftbar和rightbar包住，如果要包住，应该怎么做？谢谢了

解决方案 »

  1.   

    <body>
    <div id="content">
    <div class="leftbar">东方</div>
    <div class="rightbar">士大夫</div> 
    <div style="clear: both;">&nbsp;</div>
    </div>
    <div id="footer" style="text-align:center"><p>asdfasdfasdfasfsafsafs</p></div>
    </body> 
      

  2.   

    你要让#content包住两者，就需要把clear:both的那个元素放在content内部的最后，
    而不能放在#content外面顺便提醒下</body>的位置放错了。。
      

  3.   

    你的代码中content是id，不是css的定义, 而leftbar和rightbar是css的定义。
      

  4.   

    改成这样就行：
    <div class="content"> 
        <div class="leftbar">东方</div>
        <div class="rightbar">士大夫</div>  
    </div>
      

  5.   


    注意看lz的css选择器是#content，就是要用id的，不能用class
    .leftbar和.rightbar当然是用class。
      

  6.   

    position:re...记不得怎么写的了