Question

i have a page at this link and im trying to get the test to stay in a line stright downa dn now wrap underneath the avatar and buttons here is the HTML:

<li class="comment-item">
<a name="comment-102"></a>
    <div class="comment-buttons">
        <a href="javascript:report(102);" class="report">Report</a>
        <a href="javascript:add_vote(102);" class="vote" id="vote-102">+0</a>
        <a href="?id=127&amp;replytocom=102#respond" class="reply">Reply</a>
    </div>
    <img src="/images/avatars/default.png" height="85" width="100">
    <p class="user">nat45928</p>
    <p class="date">1 minutes ago</p>
    <p class="body">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 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;
}

.comment-item:before, .comment-item:after { 
    content: ""; display: table; 
}

.comment-item:after { 
    clear: both; 
}

.comment-item { 
    zoom: 1; 
}

.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: center;
    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?

Answer 1

Add this to p.body

margin:0 80px 0 110px;