Question

I have a div which has position set to fixed. This div is meant to be site’s header.

The problem is that it should take 100 % of the width except for leaving a small gap on the right edge, where we show a custom styled scroll-bar. The body of this page has been absolutely positioned and overflow set to scroll to present the custom scroll-bar.

I tried with 100% width, but then it takes 100% of the view-port instead of its parent. I also tried setting margin-right to scroll-bar width but it seems that is not honored. Is there a way to do this without using Javascript?

Answer 1

Instead of setting width to 100% I would use something like

#header {
    height:30px; /* assumption */
    top:0;
    left:0;
    right:10px; /* assumption */
}