How can I set width using percentage and get the same width with or without a vertical scrollbar?

Question

I have an element which I want to have width: 50%. But when the right scrollbar is there, that 50% looks different than before, and since certain elements appear and disappear (through animation), the scrollbar also appears and dissapears, dynamially changing my element's width.

See the Live Demo

Is there any way I can set an element's width with a percentage and not have it influenced by the presence or absence of a vertical scrollbar?

Answer 1

You could make width adjustments to accommodate the scroll bar on the click, but if you are going to have a lot going on that may cause this to occur, it would probably be best to just put...

body {overflow-y: scroll;}

...and have the vertical scroll bar always be present. See http://jsfiddle.net/htWrC/1/