Fixed Div overlaps scrollbar of static div

css layout position css-position fixed
user3631654 picture user3631654 · Sep 3, 2014 · Viewed 12.4k times · Source

I'm having trouble to to style my layout like I want it to. I have a content area #content (the grey you can see in the example image) with a yellow element inside. This div is position:static;height:100%;. Now I have a #left-panel div also, with position:fixed;height:100%;. The problem is, if the content area has not enough space a horizontally scrollbar appears. This will be overlaped of the fixed div. For me it is all logically, but I don't know how to get around this. My scrollbar of the #content-element should be visible the whole width of the window. So it would not be a solution for me to just reduce the width of the content if the panel is in view.

The whole css:

#content{
    width:100%;
    height:100%;
    background:grey;
}
#left-panel{
    position:fixed;
    top:0;
    left:0;
    width:300px;
    height:100%;
    overflow-y:auto;
}

Can somebody help me fixing this with pure CSS?

enter image description here

Fiddle: http://jsfiddle.net/a2wn8x5z/1/

Answer

dude picture dude · Sep 26, 2014

Your wrapper element is position:fixed; I think that you are talking about a overlay with a navigation panel on the left. Well, I had a similar situation and found out, that you can't use position:fixed; if your parent element is also position:fixed;. This will overlap the scrollbar of the parent wrapper (the overlay).

So you have to use position:absolute; instead or use this open source plugin to remove the width/height of the scrollbar from your element:

Scrollbar Fixer

Related questions

How to position three divs in html horizontally?

I am creating a sample website which has three divisions horizontally. I want the left most div to be 25% width, the middle one to be 50% width, and right to be 25% width so that the divisions fill all the 100% space horizontally. &…

Read More
CSS3 box-sizing: margin-box; Why not?

Why don't we have box-sizing: margin-box;? Usually when we put box-sizing: border-box; in our style sheets we really mean the former. Example: Let's say I have a 2 column page layout. Both columns have a width of 50%, but they look kind …

Read More
Difference between position:sticky and position:fixed?

The documentation was pretty hard to understand since I am new to CSS. So can anyone please explain the actual difference between position:sticky and position:fixed? I would also appreciate an example. I have gone through https://developer.mozilla.…

Read More