The best way to describe this issue is probably to show you an example:
css/right aligned, works fine when clicking the arrow both ways: http://jsfiddle.net/JDhuK/1/
css/left aligned, only works properly when left arrow is used: http://jsfiddle.net/3nqr4/
I've provided two javascript functions(leftTest and rightTest)that you will need to switch from if you decide to flip-flop yourself(both documents are provided). [Change this in the onload property inside the body tag **don't forget to change box1-3 to the left/right property accordingly]
The best reasoning I came up for this odd occurrence was that the css/left property had higher precedence than the right property.
Reasoning: 1. When using 'left' applying 'right' would have no effects; elements would stay in their original position. Applying 'left' again to increase/decrease value worked just fine. 2. when using 'right' applying 'left' would work as intended as well as 'right' again to increase/decrease value.
What do you think?