Would anyone perhaps be able to help me adjust my code to accomplish the following effect?


I went through the document but am having trouble figuring out exactly how to adapt it to my existing layout without changing anything except the scroll format. That example has a fixed header and footer but rather than an internal scrolling div, it uses the standard browser scrollbar to do the same thing.

Any advice on achieving that with my current setup would be fantastic. My code is as follows:

Relevant CSS

body {
  background-color: #000000;
  color: #ffffff;
	margin: 7px 0;
	padding: 0;
	font-family: Arial, Helvetica, "Times New Roman", sans-serif;
	font-size: 13px;	

p {
	margin-top: 0;
	line-height: 18px;
	padding-left: 1px;

#header {
  background: #000000;
	margin: 0 auto;
	padding-bottom: 0px;
	width: 875px;
	height: 43px;

#navbar {
	width: 875px;
	height: 76px;
	margin: 0 auto;

#content {
  background: #000000 url(images/bg.jpg);
	margin: 0 auto;
	width: 875px;
div.scroll {
  border: 1px solid #000000;
  background:#000000 url('images/space.jpg') repeat-y 0 0;
  padding-left: 3px;
  padding-top: 2px;
  height: 450px;
  overflow: auto;
  overflow-y: auto;
  overflow-x: hidden;
  margin-left: auto;
  margin-right: auto;

Example html for main page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<!--#include virtual="head.inc"-->

<!--#include virtual="header.inc"-->

<div id="content">

<div class="scroll">



<!--#include virtual="navbar.inc"-->