How do I stop a fixed, 100% width element from overlapping the browser's scroll-bar?

Question

My website has 4 columns-each for one of the pages. Thus, the width of the mask in the wrapper is 400%. Navigation is made with the scrollTo jquery plugin, both vertically and horizontally.

Because the navigation bar was set to position: fixed; and width: 100%; , it was overlapping the div's scroll. I gave it right: 17px; but it also makes the pages scroll +17 extra pixels.

Is there any way of setting the width of each of the pages to 100% - 17 pixels?

Otherwise, how to avoid putting right: 17px; on navigation without having to overlap the scroll?

Link to the website: www.inbrackets.dk/test

Answer 1

I would not mess with the right positioning at all. Your scroll bar is on your #wrapper div, and since it is position: absolute , I would adjust some settings on that to get the scroll bar to sit below the #nav .

First, remove the height from the #wrapper and then change/add the following css to #wrapper :

top: 70px ; /* clears your nav */
bottom: 0px; /* gives it the height; puts the scroll bar at the bottom of the screen */

Answer 2

Simplest solution is to use calc .

width: -webkit-calc(100% - 17px);
width:         calc(100% - 17px);

However this has limited support - it is not supported in IE8 and lower.

sidenote: in several browsers, especially on windows machines the scrollbar is 20px wide, so you need right:20px . Also your font is extremely hard to read on my machine:

Answer 3

I would avoid using calc, and set your fixed nav to just span left: 0, and right: 0;

position: fixed;
top:0;
right: 0;
left: 0;

fiddle: http://jsfiddle.net/a8LXV/