title: CSS prevents scrolling
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>I've attached a copy of the stylesheet, if anyone sees something that could cause this, help would be appreciated.</p>
  
  <pre><code>#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;
  }
  </code></pre>