html - div 内の div が適切に配置されない理由

Question

<div id="progressbarr">margin-top :50% を使用すると、祖先の div 内でうまくラップされず、水平方向の中央に配置されることを期待していました。

HTML ボックス

CSS

#col3wrap{
    height: 50px;
    background: #DDD;
}

.profilepic {
    width: 50px;
    height: 50px;
    background: red;
    float: left;
    margin: 0 10px 0 0;
}

#progressbarr {
    float: left;
    width: 300px;
    height: 20px;
    background: #eee;
    margin: 50% 0 0 0;
}

#progressbarr > div {
    background-color: green;
    width: 40%;
    height: 20px;
}

http://jsfiddle.net/Xdwhk/