CSS border not fitting item right

i have a page at this link and im trying to get the border around the comments to not be higher than the bottom of the image so i have this for the html of one of the comments:

<li class="comment-item">
    <a name="comment-94"></a>
    <div class="comment-buttons">
        <a href="javascript:report(94);" class="report">Report</a>
        <a href="javascript:add_vote(94);" class="vote" id="vote-94">+1</a>
        <a href="?id=49&amp;replytocom=94#respond" class="reply">Reply</a>
    </div>
    <img src="/images/avatars/default.png" height="85" width="100">
    <p class="user">nat45928</p>
    <p class="date">August 3, 2011, 5:04 am</p>
    <p class="comment-body">test</p>
</li> 

and i have this for the css associoated with the comment item:

.comments .comment-item {
    list-style: none;
    border:2px black solid;
    border-radius:15px;
    margin: 5px 0 0 0;
    padding: 10px;
    clear:both;
    width:auto;
    height:auto;
}

.comments .comment-item * {
    margin: 0;
    padding: 0;
}

.comments .comment-item .user {
    font-family: "True Food Looks";
    letter-spacing:-2px;
    display:inline;
}

.comments .comment-item .date {
    margin-left:10px;
    display:inline;
}

.comments .comment-item img {
    float:left;
    margin-right:5px;
    border: solid black 1px;
    border-radius: 15px;
}

.comments .comment-item .comment-buttons {
    float:right;
    display:block;
    width: 80px;
    height: 70px;
}

.comments .comment-item .comment-buttons a {
    display:block;
    text-align: cent开发者_JS百科er;
    text-decoration: none;
    color: #000000;
}

.comments .comment-item .comment-buttons .report {
    height: 20px;
    margin-bottom: 5px;
    background-color:#C6B784;
    border-top-left-radius: 25px 20px;
    border-top-right-radius: 25px 20px;
}

.comments .comment-item .comment-buttons .vote {
    height: 20px;
    background-color:#70675C;
    border-radius: 10px;
}

.comments .comment-item .comment-buttons .reply {
    height: 20px;
    margin-top: 5px;
    background-color:#C6B784;
    border-bottom-left-radius: 25px 15px;
    border-bottom-right-radius: 25px 15px;
}

Why is this happening and how can i fix it?

---

.comment-item:before, .comment-item:after { content: ""; display: table; }
.comment-item:after { clear: both; }
.comment-item { zoom: 1; }

Here is the example

---

Add for content-item (your LI)

min-height:95px;

before your closing </li>

add:

<div style="clear:both"></div>

---

Add a div below each .comment-body <p> like this:

<li class="comment-item">
    <a name="comment-93"></a>
    <div class="comment-buttons">
        <a href="javascript:report(93);" class="report">Report</a>
        <a href="javascript:add_vote(93);" class="vote" id="vote-93">+0</a>
        <a href="?id=49&replytocom=93#respond" class="reply">Reply</a>
</div>

    <img src="/images/avatars/default.png" width="100" height="85" />
    <p class="user">nat45928</p>
    <p class="date">August 3, 2011, 5:04 am</p>
    <p class="comment-body">test</p>
    <div style="clear:both;"></div>
</li>