CSS prevents scrolling - html

Question

I'm working on a project for a friend, which involves making a website for his Real-estate company. The page is all done, with the content on it.. and there's sufficient content that I'd have to scroll down to read the whole page.
When I add the link to the external CSS stylesheet to the header, the page gets the look that I want, but for some reason, the scroll-bars disappear (Chrome and Safari, Mac 10.8) and I can't scroll down to read the content at the bottom. Removing the link to the CSS brings back the scrollbar, but obviously the pages lose all their styling.
I've attached a copy of the stylesheet, if anyone sees something that could cause this, help would be appreciated.
#wrapper {
width: 1024px;
margin: 0 auto;
}
body {
background: #E4BD82 url("../img/bg.gif") repeat;
font: normal 12px/150% "Verdana", "Arial", "Helvetica", sans-serif;
color: #4b2b16;
}
body .text
{
font: normal 12px/150% "Verdana", "Arial", "Helvetica", sans-serif;
}
#header {
margin-left:auto;
margin-right:auto;
top: 0px;
width: 1024px;
height: 150px;
position:relative;
background: url("../img/header.gif") bottom left no-repeat;
}
#menu {
height: 42px;
list-style: none;
position: absolute;
bottom: 5px;
left: 90px;
}
#menu li {
float: left;
height: 42px;
line-height: 42px;
padding: 13px 20px;
color: #D89915;
font: bold 12px "Verdana", "Arial", "Helvetica", sans-serif;
text-decoration: none;
}
#menu li a {
padding: 13px 20px;
color: #D89915;
font: bold 12px "Verdana", "Arial", "Helvetica", sans-serif;
text-decoration: none;
}
#menu li a:hover {
background-color: #4D3406;
color: #EAF6AD;
}
#sidebar {
position:fixed;
top: 151px; height: 100%; width: 290px;
background: url("../img/sidebar.gif") top left repeat-y;
}
#main {
width: 734px;
margin-left: 300px;
min-height: 1000px;
position: fixed;
}
div, img, form, fieldset, ul, li, h1, h2, h3, h6, p {
margin: 0;
padding: 5;
border: 0;
}
a.photo:link {
font: normal 8px/100% "Verdana", "Arial", "Helvetica", sans-serif;
text-decoration: none;
color: #4b2b16;
}
a.photo:visited {
font: normal 8px/100% "Verdana", "Arial", "Helvetica", sans-serif;
text-decoration: none;
color: #4b2b16;
}
a.photo:hover {
font: normal 8px/100% "Verdana", "Arial", "Helvetica", sans-serif;
text-decoration: underline;
color: #4b2b16;
}
a.photo:active {
font: normal 8px/100% "Verdana", "Arial", "Helvetica", sans-serif;
text-decoration: none;
color: #4b2b16;
}
.copyright {
font: normal 8px/100% "Verdana", "Arial", "Helvetica", sans-serif;
text-decoration: none;
text-align: center;
}
img.display {
margin-left: 150px;
padding: 1px;
border: 5px outset;
border-color: #EE7621;
}

Answer 1

Without seeing the HTML, my first thought was some overflow: hidden but then I noticed this:
#main {
width: 734px;
margin-left: 300px;
min-height: 1000px;
position: fixed;
}
The position: fixed is probably the problem here. Remove it.

Answer 2

Try removing position:fixed; from #main:
#main {
width: 734px;
margin-left: 300px;
min-height: 1000px;
//position: fixed;
}

Answer 3

You need change the property in the #main position, you are using position:fixed, change this to position:scroll. Also do not repeat CSS properties, instead do this:
#wrapper {
width: 1024px;
margin: 0 auto;
}
body {
background: #E4BD82 url("../img/bg.gif") repeat;
font: normal 12px/150% "Verdana", "Arial", "Helvetica", sans-serif;
color: #4b2b16;
}
#header {
margin:0 auto;
top: 0px;
width: 1024px;
height: 150px;
position:relative;
background: url("../img/header.gif") bottom left no-repeat;
}
#menu ul {
height: 42px;
list-style: none;
bottom: 5px;
left: 90px;
}
#menu ul li {
float: left;
height: 42px;
line-height: 42px;
padding: 13px 20px;
font-weight: bold;
}
#menu ul li a {
color: #D89915;
display: block;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #4D3406;
color: #EAF6AD;
}
#sidebar {
position:fixed;
top: 151px; height: 100%; width: 290px;
background: url("../img/sidebar.gif") top left repeat-y;
}
#main {
max-width: 734px;
margin-left: 300px;
position: scroll;
}
div, img, form, fieldset, ul, li, h1, h2, h3, h6, p {
margin: 0;
padding: 5;
border: 0;
}
a.photo, a.photo:visited{
font: normal 8px/100% "Verdana", "Arial", "Helvetica", sans-serif;
text-decoration: none;
color: #4b2b16;
}
a.photo:hover {
text-decoration: underline;
}
.copyright {
text-align: center;
}
img.display {
margin-left: 150px;
padding: 1px;
border: 5px outset;
border-color: #EE7621;
}