Fixed Div overlaps scrollbar of static div

Question

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?

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

Answer 1

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

Answer 2

First of all, you don't have to add "position: static;" style into your div, because it's static by default. There are two ways to solve your problem:

Add "position: relative;" into #content selector and declare #content after #left-panel in your HTML.

<div id="left-panel"></div>
<div id="content"></div>

#content{
    position: relative;
    width:100%;
    height:100%;
    background:grey;
}

Codepen: http://codepen.io/anon/pen/yoHxl

Or add "position: relative; z-index: 1" (z-index of #content should be higher of #left-panel's) into #content selector.

<div id="content"></div>
<div id="left-panel"></div>

#content{
    position: relative;
    width:100%;
    height:100%;
    background:grey;
    z-index: 1;
}

Codepen: http://codepen.io/anon/pen/HgwDx

Best, Marek

Answer 3

perhaps your problem is in this code here

<div style="width:110%;border-right:10px solid black;height:200px;background:yellow;"></div>

remove the width:110%; and it should be good to go.

Here's the Updated Fiddle

Edit

I think I misunderstand what's the problem before.

Because on your case, you use position: fixed; for #wrapper and #left-panel, and both use stlye left: 0, their position will overlap each other in left from the viewport, you basically need to position the left of #wrapper not to be in the same position as #left-panel, so you need to add this to #wrapper

left:200px; /* the width of #left-panel (if left panel has border, add it to this too )*/
right:0;

and remove

width:100%;

here's the Updated Fiddle

to make sure it's what you want, try change the style of the div inside #content to width:200%; and add margin:20px;

Edit Two

the cause for the scrollbar to overlap each other is because in the fiddle you use position: fixed for the #wrapper, thus will not create a scrollbar in the body, then you add overflow:auto in the #wrapper, causing the scrollbar to be created for the #wrapper and not the body, so you need to change the CSS for #wrapper to this

#wrapper{
    background:gray;
}

I don't include the height because for the div, the height is based on the child inside it, so you couldn't see the gray background, except you add some padding to it.

here's the Working Fiddle