slideDown() makes everything in wrapper shift

Question

Hello everyone, I am currently creating a simple menu where there are several names of services and a user can click on one and jQuery will show it's corresponding paragraph describing it below it. My jQuery code is fine and does exactly what I want, however, I have one bug I have yet to iron out.

Whenever I click one of these headings and it's description displays, everything in the wrapper for the page shifts to the left about 7 pixels in Firefox, it does the same thing is Google Chrome however I have not measured the amout but I am sure it is irrelevant.

Anyways, I am using the slideToggle() command to show the hidden parragraph. I assume this is occuring because when the slideDown occurs it is somehow changing the width of everything and the "margin: 0 auto;" setting for the wrapper rule in my css is compensating for this change. Does anyone have any way I can remedy this problem? I have tried several other fixes I've found around the internet but to no avail.

Here is what my code looks like, I put it on jsFiddle to make it easier to view: http://jsfiddle.net/vcH7m/ Feel free to edit it there if you like, or post what needs to be fixed here. Whatever is more convenient. Thank you very much for the help!

Answer 1

This shifting is likely caused by the vertical scrollbar. If the page gets too large, then the vertical scrollbar will show up and push the paragraph's width a bit more to the left. You can see this good in the 1st paragraph of the given jsfiddle page when you shrink the browser viewport to about 1000x600.

To fix this, you may consider to position a fixed vertical scrollbar.

html {
    overflow-y: scroll;
}