Question

I have two MAIN DIVs inside a DIV which is a PART of the page.

<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>

As shown CTHUMBNAIL and CCONTENT are two main DIVs inside a DIV. They are actually two columns. CTHUMBNAIL has a THUMBNAIL of a picture to display at the left and CCONTENT has comments. CSS associated with them are:

#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.cssThis is the FULL CSS if you require..

COMMENTHOLDER div should be bordered with the floating DIVs THUMBNAIL and CCONTENT inisde it. But it doesn’t happen so. Rather, it displays like:

http://minus.com/mCCHNGVfu/ (this is the image link. i wasnt’ allowed to include an image.

Thumbnail and Comment are not inside the border of COMMENTHOLDER DIV.

This is what I was trying to fix the whole day.

What must be the glitch.. help me out, please!!

Answer 1

Try with the below code,height:100%; overflow:hidden these two property allows the element to stretch heightwise. Whenever you use floating divs just add these two property to the parent element.

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