How to prevent fixed positioned element overlapping others elements in css?

Question

Say I have three divs:

<div id="outer"></div>   <div id="one"></div>   <div id="two"></div>   <div id="three"></div> </div>  #one {   position:fixed;   top:0px;   left:0px; }  #two {   width: 80%;   height:500px; }  #three {   width: 80%;   height:500px; } 

Divs "two" and "three" appear to be overlapped by div "one" because of position fixed.

1) What is the best way to make it such that they do not overlap?

2) What is the best way to make it such that my fixed div takes up 100% of the height, even if the user scrolls down? (like a sidebar, preventing any new divs that i want to run along the same side as divs two and three) Does the best way involve floats for #two and #three?

Answer 1

By changing the position from position: fixed; to position: sticky; solved my problem.

#one{  position: sticky;     } 

Answer 2

1:

By adding margin-left you can make sure that long fixed div doesn't overlap the others.

#two, #three {     margin-left:20%;     width:80%;     height:500px; } 

2:

Adding the bottom:0px; makes it the height of the window because it expands from the top to the bottom.

#one {         position:fixed;     top:0px;     bottom:0px;     left:0px;        width:20%;  } 

Note: I also added a flexible width of 20% to the #one div so that it plays nicely with the other two flexible width divs.

Fiddle: http://jsfiddle.net/ZPRLd/