why div within div doesn't position well within - html

Question

<div id="progressbarr"> still did not wrap well within its ancestor div when I use margin-top :50%, and expecting it will be placed at the middle horizontally.
HTML
box
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/

Answer 1

Your margin value is calculated using the parent elements width. Why? Good question. I don't know but here is some discussion on the topic:
Why are margin/padding percentages in CSS always calculated against width?
Here is your demo with the #col3wrap with a width set:
http://jsfiddle.net/Xdwhk/1/
Try adjusting the width to see how the margin-top value changes with it.
So you're going to have to find a different method, other than using margin-top, to vertically centre your progress bar.
Here is one way, using position: relative and calc to set the top value:
CSS
#col3wrap{
height: 50px;
background: #DDD;
position: relative;
}
.profilepic {
width: 50px;
height: 50px;
background: red;
float: left;
margin: 0 10px 0 0;
}
#progressbarr {
float: left;
width: 300px;
height: 20px;
background: #eee;
position: relative;
top: 30%;
top: -webkit-calc(50% - 10px);
top: calc(50% - 10px);
}
#progressbarr > div {
background-color: green;
width: 40%;
height: 20px;
}
Demo
Note calc is not supported by all browsers so we must have a fall back.