Fixing column alignment - html

Question

I want column 1 (comment 1) and column 2 (comment 2) to be next to each other and to be floated to the left side. Column 3 (comment 3) should be floated to the right side.
jsfiddle
I've tried a lot but can't make it work with %.
HTML:
<div class="comment_one">
<div class="reitings">
<div class="rate pluss"><img class="plus" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAIAQMAAAD3KoyyAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUeNpjYMAOAAAYAAFG27MLAAAAAElFTkSuQmCC"> 83</div>
</div>
</div>
<div class="comment_two">
<div class="reitings">
<div class="rate minuss"><img class="minus" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAIAQMAAAD3KoyyAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUeNpjYMAOAAAYAAFG27MLAAAAAElFTkSuQmCC"> 9</div>
</div>
</div>
<div class="comment_three">
<div class="reitings">
<div class="rate minuss"><img class="minus" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAIAQMAAAD3KoyyAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUeNpjYMAOAAAYAAFG27MLAAAAAElFTkSuQmCC">Report</div>
</div>
</div>
CSS:
.comment_one {
width:25%;
float:left;
}
.comment_two {
width:25%;
float:left;
}
.comment_three {
float:right;
width:40%;
}
.reitings {
display:table;
width:50%;
border:1px solid #e9e9e9;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.rate {
display:table-cell;
text-align:center;
vertical-align:middle;
line-height:1.5em;
padding:10%;
}
.rate img {
vertical-align:middle
}
.pluss {
background:#f5f5f5;
color:#4d761a
}
.minuss {
background:#f5f5f5;
color:#a8404b;
border-left:1px solid #e9e9e9;
text-align:center
}

Answer 1

Structure the HTML:
<div id="comments">
<div class="c1 rate-plus"></div>
<div class="c2 rate-plus"></div>
<div class="c3 rate-minus"></div>
</div>
Access all divs in #comments with #comments div. Think about what the divs have in common. Write it in the CSS. For Example:
#comments div {
background: #f5f5f5;
border-left: 1px solid #e9e9e9;
padding: 12px;
margin: 5px;
text-align: center;
}
Float c1 and c2 with left and c3 with right.
Complete CSS
#comments div {
background: #f5f5f5;
border-left: 1px solid #e9e9e9;
padding: 12px;
margin: 5px;
text-align: center;
}
.rate-plus {
color: #4d761a
}
.rate-minus {
color: #a8404b;
}
.c1, .c2 {
width: 25%;
float: left;
}
.c3 {
width: 37%;
float: right;
}
Complete HTML
<div id="comments">
<div class="c1 rate-plus">
<img class="plus" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAIAQMAAAD3KoyyAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUeNpjYMAOAAAYAAFG27MLAAAAAElFTkSuQmCC">83
</div>
<div class="c2 rate-minus">
<img class="minus" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAIAQMAAAD3KoyyAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUeNpjYMAOAAAYAAFG27MLAAAAAElFTkSuQmCC">9
</div>
<div class="c3 rate-minus">
<img class="minus" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAIAQMAAAD3KoyyAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUeNpjYMAOAAAYAAFG27MLAAAAAElFTkSuQmCC">Report
</div>
</div>
I've modified it a little bit.
Demo