Page won't scroll in any browser--am I using outdated CSS?

It's been about five years since I really got hands-deep into CSS coding, so I may be using outdated codes; however, everything seems to work fine but the scroll bar. Although I can add scroll bars to any div element I create, it won't allow the page to scroll. I've tried adding the overflow: auto; and overflow: scroll; options to my body tag but nothing works. I've included the coding I'm using as well, but I've double and triple checked that I haven't included another set of scroll tags. Can anyone see what the problem is? I'm afraid my CSS might be out of date, but everywhere I look says to just use the overflow tags. Thanks!

Also, the content element is set to be longer than the page so I can see if my scroll bar works, but adding overflow: scroll; to my body tag makes a scrollbar appear but not function.

CODING:

开发者_如何学编程<style>
body{background: #000000; font-family: tahoma;}

#content{position: fixed; top: 155px; left: 347px; overflow: auto;}

.content{height: 800px; width: 506px; color: #FFFFFF; overflow: auto;}

#navigation{position: fixed; top: 155px; left: 153px;}

.navigation{height: 643px; width: 184px; background: #000000;}

a:link{display: block; background: #A70000; font-family: tahoma; font-size: 14pt; text-decoration: none; color: #FFFFFF; border-left: 3px #D50000 solid; width: 

180px; height: 25px; text-align: left; margin-bottom: 4px; text-indent: 6pt;}

a:hover{display: block; background: #A70000; font-family: tahoma; font-size: 14pt; text-decoration: underline; color: #FFFFFF; border-left: 3px #D50000 solid; 

width: 180px; height: 25px; text-align: left; margin-bottom: 4px; text-indent: 6pt;}
</style>

The issue appears to be with position: fixed;

position: relative would allow the content to scroll.

http://jsfiddle.net/fMhCQ/13/