嵌套浮動Div

Question

我有一個DIV內的兩個主要DIV是頁面的一部分。

<div class="commentholder">          
<div class="cthumbnail"> <!-- #1 --> 
    <a href="#"><img src="source"></a> 
</div> 

<div class="ccontent"> <!-- #2 --> 
    <a href="#" class="post_author">Dilip Raj Baral</a> 

    this is a comment.. 

    <div class="clear"></div> 

    <div class="cstatus"> 
     April 16, 2012 &#183; 
     <a href="#" class="like">Like</a> &#183; 
     <a href="#" class="likes">0</a> 
    </div> 

</div> 

如圖CTHUMBNAIL和CCONTENT是一個DIV中兩個主要的DIV。他們實際上是兩列。 CTHUMBNAIL有一張THUMBNAIL的照片顯示在左側，CCONTENT有評論。與之相關聯的CSS是：

#content .commentholder { 
    display: block; 
    padding: 5px 0 5px 0; 
    border: 2px dotted #d2d9e7; /**********/ 
    } 
#content .ccontent { 
    vertical-align: top; 
    margin-left: 10px; 
    float: left; 
    width: 350px; /*change*/ 
#content .cstatus { 
    display: block; 
    float: left; 
    margin-top: 1px; 
    color: #979797; 
    font-size: 11px; 
    } 
#content .cthumbnial {float: left;} 
#content .cthumbnail img { 
    width: 32px; 
    height: 32px; 
    } 

http://connectu.saipal.edu.np/styles/style.css這是FULL CSS如果您需要..

COMMENTHOLDER DIV應該浮動的DIV縮略圖被鑲上和CCONTENT inisde它。但事情並非如此。相反，它會顯示如：

http://minus.com/mCCHNGVfu/（這是圖片鏈接我不是」允許包括圖像

縮略圖和評論都沒有COMMENTHOLDER DIV的邊框內

這是什麼。我試圖修復了整整一天。

什麼必須毛刺..幫助我，請！

Answer 1

嘗試用下面的代碼，height:100%; overflow:hidden這兩個屬性允許伸展高度的元素。每當你使用浮動div只需將這兩個屬性添加到父元素。

#content .commentholder { 
    display: block; 
    padding: 5px 0 5px 0; 
    border: 2px dotted #d2d9e7; /**********/ 
    height:100%; 
    overflow:hidden; 
} 

Answer 2

您添加了float：left;到你的.ccontent div，但你沒有清除浮動.. 在.ccontent後面加上你的班級='clear'的div，看看問題是否消失。你也可以試試這個link的解決方案。