为什么div不正确地浮动？

Question

我要实现这一点：

我被困在这里：

正如你所看到的，“项目说明”框中现在显示在正确的地方。我已经仔细检查了测量结果。我不知道我做错了什么。

下面是标记：

<div id="container"> 
    <div id="container2"> 
     <div id="header"> 
      <img src="images/dealstoreconcept-ebay-listing-template2_03.png"> 
     </div> 
     <div id="nav"> 
      <a href="#"><img src="images/dealstoreconcept-ebay-listing-template2_06.png"></a> 
      <a href="#"><img src="images/dealstoreconcept-ebay-listing-template2_07.png"></a> 
      <a href="#"><img src="images/dealstoreconcept-ebay-listing-template2_08.png"></a> 
      <a href="#"><img src="images/dealstoreconcept-ebay-listing-template2_09.png"></a> 
      <a href="#"><img src="images/dealstoreconcept-ebay-listing-template2_10.png"></a> 
      <a href="#"><img src="images/dealstoreconcept-ebay-listing-template2_11.png"></a> 
      <a href="#"><img src="images/dealstoreconcept-ebay-listing-template2_12.png"></a> 
     </div> 
     <div id="content"> 
      <div id="cat"> 
       <div id="cat-head"> 
        Categories 
       </div> 
       <div id="cat-content"> 

       </div> 
      <div> 
      <div id="content-right"> 
       <div id="des"> 
        <div id="des-head"> 
         Item Description 
        </div> 
        <div id="des-content"> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

这里是CSS：

#container { 
width: 100%; 
background-color: #FFFFFF; 
background-image: url(images/bg.png); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position: center top; 
} 
#container2 { 
width: 970px; 
margin-top: 0px; 
margin-right: auto; 
margin-bottom: 0px; 
margin-left: auto; 
} 
#header { 
padding-top:14px; 
padding-bottom:10px;  
} 
#nav { 
width:970px;  
} 
#nav img { 
float: left;  
} 
#content { 
background-color: #FFFFFF; 
border-right-width: 1px; 
border-left-width: 1px; 
border-right-style: solid; 
border-left-style: solid; 
border-right-color: #a81717; 
border-left-color: #a81717; 
width: 968px; 
padding-top: 25px; 
padding-right: 8px; 
padding-bottom: 25px; 
padding-left: 8px; 
} 
#cat { 
float: left; 
width: 217px; 
border: 1px solid #a81717; 
} 
#cat-head { 
width: 209px; 
float: left; 
background-color: #a81717; 
padding-top: 7px; 
padding-left: 8px; 
padding-bottom: 2px; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 15px; 
font-weight: bold; 
text-transform: uppercase; 
color: #FFFFFF; 
} 
#cat-content { 
float: left; 
padding-top: 15px; 
padding-bottom: 15px; 
} 
#content-right { 
float: left; 
margin-left:11px; 
width: 721px; 
} 
#des { 
float: left; 
width: 719px; 
border: 1px solid #a81717; 
} 
#des-head { 
width: 711px; 
float: left; 
background-color: #a81717; 
padding-top: 7px; 
padding-left: 8px; 
padding-bottom: 2px; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 15px; 
font-weight: bold; 
text-transform: uppercase; 
color: #FFFFFF; 
} 
#des-content { 
float: left; 
padding-top: 15px; 
padding-bottom: 15px; 
width: 689px; 
} 

任何想法，为什么发生这种情况？

Answer 1

第一个问题是

<div id="cat"> 
       <div id="cat-head"> 
        Categories 
       </div> 
       <div id="cat-content"> 

       </div> 
      <div> ---> not closed div 

见小提琴http://jsfiddle.net/tamilcselvan/C2pX4/1/

Answer 2

你缺少结束标记

看看这个小提琴：Fiddle Demo

更换

<div id="cat"> 
<div id="cat-head"> 
Categories 
</div> 
<div id="cat-content"> 
</div> 
<div> 

与

<div id="cat"> 
<div id="cat-head"> 
Categories 
</div> 
<div id="cat-content"> 
</div> 
</div>/*error*/