Scroll page content within specific area? - html

Question

I'm designing a website which has fixed elements on the outer edges of a fixed-width layout. A div in the center is reserved for the content.
When the user scrolls, I want all of the content (besides said fixed outer navigation elements) to stay within the borders of that center element.
Here's a quick mockup of what I mean:
I could very easily set the overflow property of the center element to auto, and have everything remain inside. However, it's very important that a scroll bar not be present on the edge of that element.
Basically, I'm wondering how to either:
Restrict content to that area
(perhaps I could change the size and
positioning of the body element -- is
that allowed? -- and then position
the fixed elements outside of the
body.
Hide the scroll bar that appears
inside the div when using
overflow:auto
Any help would be greatly appreciated!

Answer 1

If possible, you should break your fixed position elements up into 4 separate sections (top, left, right and bottom). Then just make sure you pad you centre content area by their respective widths and heights so the content doesn't get overlapped:
HTML
<!-- 4 fixed position elements that will overlap your content -->
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
<div id="content">
<!-- Your content -->
</div>
CSS
html, body {
height: 100%;
}
#top, #left, #right, #bottom {
position: fixed;
left: 0;
top: 0;
z-index: 2;
background: red;
}
#top, #bottom {
width: 100%;
height: 20px;
}
#bottom {
top: auto;
bottom: 0;
}
#left, #right {
height: 100%;
width: 20px;
}
#right {
left: auto;
right: 0;
}
#content {
position: relative;
z-index: 1;
padding: 25px; /* prevent content from being overlapped */
}
You can see it in action here.
Also note the position: relative on the content area. This is so z-index works correctly and the content is displayed below the fixed sections.
If you care about IE6/7 support, you'll need to add a CSS expression fix to get fixed position working properly in those awesome browsers.