CODEWITHSUNDEEP
widthhtmlcss-position
AppleGrew
AppleGrew

Reputation: 9574

How do I make a 100% width fixed div to leave some space on right?

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?

Upvotes: 1

Views: 203

Answers (2)

inhan
inhan

Reputation: 7470

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

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

Upvotes: 0

Josh
Josh

Reputation: 615

Let me just say this..

If your width is set to 100%, and you set margin-right: 20px;.. then the 20px is added to the original div.

Aside from that, I don't know what you're talking about without seeing it.

Upvotes: 1

Related Questions