Scrolling page content in a specific area?

Question

I am designing a website with fixed elements on the outside edges of a fixed width layout. A div in the center is reserved for content.

When the user scrolls, I want all the content (except for the specified fixed external navigation elements) to remain within this central element.

Here is a quick layout of what I mean: alt text http://i35.tinypic.com/15s3cax.png

I could easily set the overflow property of the central element to auto, and everything would remain inside. However, it is very important that the scroll bar is not present on the edge of this element.

Basically, I am wondering how to do this:

• Limit the contents to this area (perhaps I could change the size and positioning of the body element - what allowed? - and then position the fixed elements outside the body.
• Hide the scrollbar 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 into 4 separate sections (top, left, right, and bottom). Then just make sure that you fill the content area of ​​the center by their width and height so that the content does not overlap:

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 */
}

Here you can see here.

: . , z-index , .

IE6/7, , , .