center animated (variable width) div - Link included

Question

I have an animated rating bar which changes width when you mouse over it.

I tried to write a explanation of the problem, but I think it is far easier to have a look at the link.

Essentially I am having trouble centering a div as the children div's change size when the mouse is hovered over them. I have tried animating the width of the parent div at the same time but with no success.

http://degreeshowcase.com/test3.html

Answer 1

just checked your codes : do this

#ratebar {
font-size:14px;
font-weight:bold;
margin:50px auto;
width:auto;/*change this*/
}

now to position div wrap this div with some other div

Answer 2

An alternative to Praveen Prasads method:

I notice you are setting each child div to width of 20px, but at any time only one can be more than that (26px). The width you have set on the parent div is 210px. Each child div, apart from the first one, has a border of 1px.

So the maximum total width of all the child divs is worked out as follows:

9 * 20 = 180 //standard div width
1 * 26 = 26  //hovered div width
9 * 1  = 9   //border
Total: 215
215 is more than 210 so the last one drops down.

Minimum total width of all child divs is worked out as follows:

10 * 20 = 200 //standard div width
9 * 1   = 9   //border
Total: 209
209 is less than 210 so the last one stays on the same line as the rest.

The solution: try setting the width of the parent div to 215px or more. This should solve the problem.