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

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

• javascript
• css
• html

• 1 Can you post some code? What have you tried? This should be able to be acplished just using CSS. – Charles Commented Jan 21, 2013 at 19:29
• it is a little hard to isolate the code for jsfiddle so here is the link noties.me/index.php, if you click on the januari first date you can see the div i'm talking about – user1213904 Commented Jan 21, 2013 at 20:00

2 Answers 2

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/wSxss/

Adjust the positioning values according to your needs.

This fiddle demonstrates the following solution:

HTML

<div class="wrapper">
    <div class="scroller></div>
    <div class="fixed"></div>
</div>

CSS (example of key parts)

.wrapper {
    position: relative;
    height: 40px;
    overflow: hidden;
}

.scroller {
    padding-right: 200px;
    height: 100%;
    overflow: auto;
}

.fixed {
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
    width: 160px; /* .scroller padding minus the right offset to acodate scroll bar and minus any real separation between it and the scroller */
}