how to use the clear for float?

Question

I tried to use a layout where each entry will contain a vote in left side and content in right side. So I used float:left for the vote which is .left and float:right for the content which is .right. But it doesn't work out.

I think its a clear fix problem. i tried clear:both for the content in this case it is .right but couldn't make it well. Because margin bottom for the each main entry are not sitting properly.

I think this is due to poor clear fix code.

Can anybody give a alternative to make the same kind of layout or what wrong am i doing here.

.entry {
    width:80%;
    border-bottom:2px solid black;
    margin-bottom:10px;

}
.left{
    float:left;
    background-color:blue;
    width:10%;
    clear:left;
}
.right{
    float:right;
    width:90%;

}

Here is the JSfiddle

Answer 1

.entry {
    overflow: auto;
    width:80%;
    border-bottom:2px solid black;
    margin-bottom:10px;
}

http://jsfiddle.net/bFXpq/3/

Answer 2

I would add a div with the style clear:both; after all floating elements and before the end of the div containing these floating elements. In your case like this:

<div class="entry">
    <div class="left">vote</div>
    <div class="right">Contetnts</div>

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

</div>