Page Layout Breaks When Scrollbar is Visible - Is there a CSS fix?

Question

I've a fixed width 3 columns css layout working good when vertical scrollbar is hidden, but it will break as soon as vertical scrollbar shows up.

I've 2 questions,

1. Can I deal with the scrollbar as an css element defining z-index to make it in top of right div?

2. Since I think the answer to my first question is "No, you can't do that", I ask What can I do to avoid this?

example here:

http://www.mataborrao.eu/teste.html

Answer 1

1 - No

2 - One simple option is to always display the scrollbar. Check out this answer: Making the main scrollbar always visible

Answer 2

You're correct on answering your first question; As far as I know, you can't attach styles to the scrollbar. Your second question is somewhat broad, as many browsers out there will deal with scrollbars differently.

For example, depending on your OS/browser, the content on your page will shift to make room for the bar, while other browsers (for instance FF on Windows, I believe), will keep the content where it would be if there wasn't a scrollbar present (this prevents shifting if more content appends/flows vertically).

Alternatively, you could try to force the bar to always be there... this would work in most cases:

html {
overflow: -moz-scrollbars-vertical; 
overflow-y: scroll;
}

Hope this kinda helps?!