Scroll page content within specific area?

Question

Hello fellow geeks,

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.