Overflowing issues - css

Question

I am working on a HTML/CSS website, with mainly 4 divs (wrapping, top, menu and content), using a centered layout.
The problem is that the text inside my #content overlaps and I can't force it inside the div. Also, when I enable scrolling on the div and disable it on HTML, the scrolling just won't work for the div. So I get stuck with the overlapping content and no option to scroll down.
So, resuming it, I want to use 3 fixed divs, centered, leaving two side-borders and want my background-image to not move. Only the content should scroll inside of it.
Here's my CSS code:
<style type=text/css>
html
{
overflow: none;
}
head
{
}
body
{
background-color: #030B12;
}
p
{
font-family: verdana;
font-size: 12px;
color: #FFFFFF;
text-align: left;
}
h1
{
margin-top: 25px;
font-family: verdana;
font-size: 16px;
color: #FFFFFF;
text-align: center;
}
bg2
{
position: fixed;
top: 0;
left: 0;
}
#wrapper
{
height: 100%;
width: 70%;
margin: auto;
background-image: url('bg2.jpg');
background-position: fixed;
background-repeat: no-repeat;
}
#top
{
background-image:url('top.jpg');
background-repeat: no-repeat;
background-position: fixed;
height: 15%;
width: 100%;
margin: auto;
}
#menu
{
height: 60px;
width: 100%;
background-image: url('navi_bg.png');
}
#content
{
overflow: auto;
display: block;
}
ul
{
list-style-type: none;
height: 60px;
width: 663px;
margin: auto;
}
ul a
{
background-image: url(navi_bg_divider.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 22px;
padding-left: 16px;
display: block;
line-height: 60px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 21px;
color: #FFFFFF;
}
ul li
{
list-style-type: none;
float: left;
}
ul a:hover
{
color: #3F5F7B;
}

Answer 1

Based on what is available, I've created a layout that I think is what you are looking for. There are some issues with getting the top li menu items to center, but I am sure you could work that out pretty easily. You should specify the height of the content area if you want to scroll just that area, and keep the wrapper's background static.
div#content{
max-height:300px;
overflow-y:scroll;
}
Here is the fiddle