cssresizescrollbarmarginpage-jump

How to stop a margin resizing after resizing a div


I have created a div with an image inside. When clicked it resizes the div and places a larger image in. The side effect of this seems to be that the wrapper div moves a little to the left.

I have tried a few things but here is the code. Hope you can help.

http://jsfiddle.net/iamjasonlucchesi/3FuJ6/2/

Please make sure you can see the margin between the body and the Wrapper before testing the code. Also note images dont work as I have not put them in.


Solution

  • The problem is a Horizontal Jump, caused by no scroll bar being displayed in some browsers. The link below is how to solve it. http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/