Question

I have been struggling with this problem for over 2 hours,
Is there a way to make a div fixed while it is inside a bigger div.
When I scroll I want to keep the right part not scrolling.

So my question is, is there a way to do this without jquery?

Thanks

Answer 1

You have to position the inner div absolutely:

.outerDiv {
    position: relative;
    /* give it some height */
}
.contentDiv {
    height: 100%;
    overflow: auto;
}
.innerDiv {
    position: absolute;
    right: 0;
    left: 50%;
    top: 0; bottom: 0;
}

Here’s the fiddle: http://jsfiddle.net/wSxss/

---

Adjust the positioning values according to your needs.