Question

I have been struggling with this problem for a long time now, and although I have found a number of good solutions to parts of my problem, none of them seem to work combined, so I have decided to ask you.

Here is a scrn shot of the website:

https://i.stack.imgur.com/6C0k1.jpg

What I’m hoping to achieve is to have a scroll bar appear on the far right of the page when content overflows the blue container, the div that has all my content in it, not the far right of the div itself, like it would if I set the div to overflow: auto or overflow: scroll.

In other words, I would like the page to scroll, not my div.

The site essentially consist of a body background, a div for the menu and a div for the content. The code is pretty messy, so I have left it out, but if you need it, just leave a comment and I will add it right away.

Everything is supposed to be fixed as in remain like it is on the scrn shot, except for the content in the blue container to the right. I initially figured that setting everything except the container to position:fixed would work and trigger a scroll bar to appear for the page that could be used to scroll through the div, but it didn’t. This doesn’t work though, as any visible overflow in the container just ‘leaves’ the page; it doesn’t trigger a scroll bar.

As I’ve also pointed out in the scrn shot, the container-div has padding on the top and bottom and is also slightly transparent.

These two features seem to make things even more difficult. The padding, because setting overflow: visual makes content overflow, and thereby be visible, even through padding.
The transparency is an issue, since I can’t just cut out the padding and give it a z-index that’s higher than the content itself, in order to hide it; it will still be visible through it. The background image is set at a percentage or set to ‘cover’ (still figuring out which one works best), so cutting out the padding with the segment of the background image it covers, will not work either.

I hope I presented my problem and the issues clearly enough. If you have any questions or any feedback, please leave a comment.

Thank you in advance for any replies,
Magnus

NOTE: This is a repost of an early question that was trashed by someone who didn’t bother reading through it properly before rating it down. The question essentially died afterwards. I have tried to make things even more clear this time, so I’m sorry if I repeat myself. This is also the reason why my post is so long this time.

Answer 1

Something like this?

Demo: http://jsfiddle.net/6R7c2/

HTML:

<div id="top">Top</div>
<div id="middle">
    <div>Content
    </div>
</div>
<div id="bottom">Bottom</div>

CSS:

html,body{
    width:100%;
    height:100%;
    margin:0;
}
#top,#bottom{
    height:10%;
    background:blue;
    color:white;
}
#middle{
    height:80%;
    overflow:auto;
}

#middle>div{
    height:10000px;
    border:25px solid red;
}