Das scrollen der ganzen Seite anstatt der inneren div nur

Ich bin das hantieren mit CSS wieder neu...

http://www.kebax.dk/test.php

Wie Sie sehen, der container, der sogenannten map scrollen unabhängig von dem rest der container. Wie kann ich die ganze Seite scrollen, wenn mehr Inhalt eingefügt, in dem content?

Habe ich versucht, mit dem overflow-Attribut, aber ohne Glück...

BEARBEITEN für zukünftige Referenzen:

        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;
        }



<div id="container">
    <div id="leftgradient"></div>
    <div id="rightgradient"></div>
    <div id="header">
        <header>    
            <h1>
                Heading
            </h1>
        </header>
    </div>

    <div id="map">
        <div id="toppanel">
            top
        </div>
        <div id="leftpanel">
            lefty
        </div>
        <div id="content">
            Lots of text!!
        </div>
    </div>
</div>