Fixing the positions correctly so that 3 of the 4 elements on my page don't move with scroll

Question

I have a page that's been mocked up in this JS Fiddle.

The page has a title bar, a sidebar, a timeline and a div called days

The only one that should scroll is days.

I'm having trouble with the correct types of positioning so that the title bar, sidebar, and timeline stay 100% fixed as the user scrolls through .days.

Any help would be hugely appreciated

Answer 1

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.

Answer 2

You might want to give this a try if it serves your purpose. Somewhere above in your comment you said of not being sure of amount of content you would get from back-end, so this approach should take care of it.

JSFIDDLE

Code:

.container {
    border: 1px solid #ccc;
}

.titlebar {
    height: 50px;
    width: 100%;
    background: white;
    border-bottom: 1px solid #ccc;
    position: fixed;
    top:0;
}

.content {
    overflow: hidden;
}

.sidebar {
    width: 150px;
    height: 100%;
    background: gray;
    position: fixed;
    left:0;
    top: 50px;
}

.content-area {
    width: 75%;
    float: left;
    margin-top: 60px;
    margin-left:150px;
}

.timeline {
    height: 12px;
    width:100%;
    background: blue;
    position: fixed;
    top:50px;
}

.days {
    background: orange;
}

Specifically, have a look at how position:fixed is used along with top, left and margin-top and margin-left.

Once I wrote about CSS positioning, it might help you understand it better.