title: Scrolling of whole page instead of inner div only
body: <p>I'm fiddling with CSS again again...</p>
  
  <p><a href="http://www.kebax.dk/test.php" rel="nofollow">http://www.kebax.dk/test.php</a></p>
  
  <p>As you see, the container called <code>map</code> is scrolling independently of the rest of the <code>container</code>. How can I make the whole page scroll when more content is placed in the <code>content</code>?</p>
  
  <p>I have tried using the overflow attribute, but without luck...</p>
  
  <p><strong>EDIT for future references:</strong></p>
  
  <pre><code>        body {
              background:#000000;
              margin:0;
              padding:0;
              overflow:scroll;
              overflow-x:hidden;
          }
  
          #container{
              position: relative;
              height: 100%;
              width: 950px;;
              background: yellow;
              margin-left:auto;
              margin-right:auto;
              overflow:auto;
          }
  
          #map {
              position:absolute;
              top:80px;
              bottom:0;
              left:0;
              right:0;
              background:#fff;
              overflow:auto;
              overflow-x:hidden;
          }
  
          #header {
              height:80px;
              width:900px;
              background:#333;
              margin:0;
              padding:0;
          }
          #header h1 {
              color:#fff;
              margin:0;
              padding:0;
          }
  
          #leftgradient {
              width:50px;
              height:80px;
              float:left;
              background:#096;
              background: -webkit-gradient(linear, left top, right top, from(#000000), to(#333333));
          }
  
          #rightgradient {
              width:50px;
              height:80px;
              float:right;
              background:#096;
              background: -webkit-gradient(linear, left top, right top, from(#333333), to(#000000));
          }
  
          #toppanel {
              background:#179AE8;
              width:950px;
              height:50px;
          }
  
          #leftpanel {
              background:#179AE8;
              width:100px;
              height:250px;
              float:left;
          }
  
          #content {
              background:#099;
              width:850px;
              margin-left:100px;
          }
  
  
  
  &lt;div id="container"&gt;
      &lt;div id="leftgradient"&gt;&lt;/div&gt;
      &lt;div id="rightgradient"&gt;&lt;/div&gt;
      &lt;div id="header"&gt;
          &lt;header&gt;    
              &lt;h1&gt;
                  Heading
              &lt;/h1&gt;
          &lt;/header&gt;
      &lt;/div&gt;
  
      &lt;div id="map"&gt;
          &lt;div id="toppanel"&gt;
              top
          &lt;/div&gt;
          &lt;div id="leftpanel"&gt;
              lefty
          &lt;/div&gt;
          &lt;div id="content"&gt;
              Lots of text!!
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>