Hm, in this case I'm not sure position:fixed
would actually be the easiest approach to the problem. I think the issue actually lies in the heights of your elements.
The .container
that wraps all the elements has a height of 300px. However, .days
has no defined height; so even though you specified overflow-y:scroll
, it won't really scroll - rather, it will just expand to the height required to display all of the content. This isn't immediately apparent because of the overflow:hidden
on .container
though, which causes the additional height of .days
to be hidden.
Specifying a height on .days
should give you what you want. But what height, exactly? Well, I'm going to assume that you'll want the bottom of .days
to be the same as the bottom of .sidebar
, which has a height of 250px. Since .timeline
(above .days
) has a height of 12px, then the height you need is 250px - 12px = 238px.
In your CSS definitions, just add this style:
.days {
height: 238px;
}
This should let you scroll the content of .days
, without shifting the positions of its surrounding elements.
Here's an updated JSFiddle to demonstrate. Hope this helps! Let me know if you have any questions.