vertical-align:middle on a div within a container - html

Question

I am having some trouble with div positioning. I'm working on a comment system in wich comments can get upvotes and downvotes. For every comment the up/down vote-buttons needs to be left of my comment text, and vertically aligned in the middle of my comment-container div. (regardless of how big the comment is)
At the moment it wont work properly, because the buttons wont get to the middle of the div. (see: http://jsfiddle.net/mcSfe/1838/)
In the testcase i want the leftside to be stretched all the way down, and the red box vertically centered in the middle of the leftside. vertical-align, and display:table-cell, did not brought the right result..
Here is my test html code:
<div class="commentContainer">
<div class="leftside">
<div class="innerleft">
test
</div>
</div>
<div class ="CommentBox">
<p>hello</p>
<p>this is my comment</p>
<p>another line of comment</p>
</div>
and here is my test css code:
div.commentContainer{
float:left;
border:1px solid blue;
}
div.leftside {
float:left;
width: 50px;
background: gray;
text-align: center;
}
div.innerleft {
float:left;
width: 25px;
height: 25px;
margin-left:13px;
background: red;
}
div.CommentBox {
float:right;
width:200px;
background-color:green;
}

Answer 1

Remove float from .commentbox and .leftside and add display:table-cell with vertical-align:middle
div.commentContainer{
float:left;
border:1px solid blue;
}
div.leftside {
width: 50px;
background: gray;
text-align: center;
display: table-cell;
vertical-align: middle
}
div.innerleft {
float:left;
width: 25px;
height: 25px;
margin-left:13px;
background: red;
}
div.CommentBox {
width:200px;
background-color:green;
display: table-cell
}
DEMO

Answer 2

LIke this
demo
css
div.commentContainer{
float:left;
border:1px solid blue;
display:table;
}
div.leftside {
display:table-cell;
width: 50px;
background: gray;
text-align: center;
}
div.innerleft {
width: 25px;
height: 25px;
margin-left:13px;
background: red;
vertical-align:middle;
}
div.CommentBox {
display:table-cell;
width:200px;
background-color:green;
}

Answer 3

Inside of using floats, use inline-block.
JSFiddle
CSS
div.commentContainer{
float:left;
border:1px solid blue;
}
div.leftside {
display:inline-block;
vertical-align:middle;
width: 50px;
background: gray;
text-align: center;
}
div.innerleft {
float:left;
width: 25px;
height: 25px;
margin-left:13px;
background: red;
}
div.CommentBox {
display:inline-block;
vertical-align:middle;
width:200px;
background-color:green;
}
Issues regarding inline-block whitespace can be addressed separately.