I have a problem where the browser scrollbar doesn't appear when my web content extends beyond the browser window. I'm pretty sure the problem is located in the container div and not the footer, as removing the footer doesn't change anything. Any suggestions?

Here's the html part.

```
<html>
<head>
    <link rel ="stylesheet" type="text/css" href="style.css"></link>
    <style>
    body {background-color:#64B6B1;}
    </style>
</head>
<body>
<div id="container">
    <div class="box">
    </div>
    <div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<div id="footer">
<div class="icon"><h2>AB</h2></div>
<ul>
<li><a href="webdesign.html"><div class="webdesign" style="background-color:#64B6B1;width:25px;height:25px;"></div></a></li>
<li><a href="graphicdesign.html"><div class="graphic"></div></a></li>
<li><a href="about.html"><div class="about"></div></a></li>
<li><a href="index.html"><div class="home"></div></a></li>
</ul>
</div>
</body>
</html>

```

Here's the CSS part.

```
@charset "utf-8";

html {height:100%;}

body {
font-family:Arial Narrow, sans-serif;
color:#FFFFFF;
text-align:right;
height:100%;
overflow:hidden;
}

h1 {font-family:Arial, sans-serif;}

.box {
width:390px;
height:300px;
float:left;
background-color:#CCCCCC;
}

#container {
position:absolute;
width:80%;
min-width:780px;
top:10%; right:0; left:0;
margin: auto;
padding:5px;
background-color:#000000;
}

/* FOOTER */

#footer {
width:100%;
height:50px;
position:fixed;
bottom:0;
right:0;
z-index:10;
overflow:hidden;
background-color:#FFFFFF;
}

ul {
list-style-type:none;
float:right;
margin:0;
padding:15px;
}

li {
display:inline;
float:right;
padding-left:10px;
}

div.home {
-moz-border-radius:50px/50px;
-webkit-border-radius:50px/50px;
border-radius:50px/50px;
background-color:#46433A;
width:20px;
height:20px;
transition:width 1s, height 1s, background-color 1s;
-webkit-transition:width 1s, height 1s, background-color 1s;
}

div.home:hover {
width:25px;
height:25px;
background-color:#8AB688;
}

div.about {
-moz-border-radius:50px/50px;
-webkit-border-radius:50px/50px;
border-radius:50px/50px;
background-color:#46433A;
width:20px;
height:20px;
transition:width 1s, height 1s, background-color 1s;
-webkit-transition:width 1s, height 1s, background-color 1s;
}

div.about:hover {
width:25px;
height:25px;
background-color:#DED4B9;
}

div.webdesign {
-moz-border-radius:50px/50px;
-webkit-border-radius:50px/50px;
border-radius:50px/50px;
background-color:#46433A;
width:20px;
height:20px;
transition:width 1s, height 1s, background-color 1s;
-webkit-transition:width 1s, height 1s, background-color 1s;
}

div.webdesign:hover {
width:25px;
height:25px;
background-color:#64B6B1;
}

div.graphic {
-moz-border-radius:50px/50px;
-webkit-border-radius:50px/50px;
border-radius:50px/50px;
background-color:#46433A;
width:20px;
height:20px;
transition:width 1s, height 1s, background-color 1s;
-webkit-transition:width 1s, height 1s, background-color 1s;
}

div.graphic:hover {
width:25px;
height:25px;
background-color:#CE534D;
}

div.icon {
-moz-border-radius:50px/50px;
-webkit-border-radius:50px/50px;
border-radius:50px/50px;
background-color: #FFFFFF;
width:35px;
height:35px;
float:left;
margin-left: 5px;
margin-top: 4px;
border-style:double;
border-color:#46433A;
}

h2 {
font-size:18px;
font-family:Arial Narrow,sans-serif;
color:#46433A;
margin-top:7px;
margin-right:6px;
}

```