Do you have an image of what you are trying to accomplish? the layout is so horribly broken here between scrollbars and misplaced elements I'll be damned if I can figure what you are even trying to do...
... and your text explanation wasn't helping.
Though I suspect you are dealing with one of those 'pretty picture in photoshop has nothing to do with building a website' moments. The 170k background image being a dead giveaway on that (all by itself being larger than I'd build an entire page on a site).
Though I'm wondering if all you need to do is change those overflow:auto's to overflow:hidden... taking a peek at the code...
You seem to have WAY more container DIV's there than necessary... I would suggest removing #bg, #logo (that's H1's job), #main, #header, and the DIV on #menu and just put that on the UL directly. Since you are already using a giant fixed image as the background, I'd probably also say screw it and pre-composite that shadow on the background (aka make it just one image). Then all you have to worry about is the body repeat and the footer.
Wait, I'm not even seeing a image for the shadow - are you messing around with the "not ready for use on production websites" CSS3 shadows or something?
-webkit-box-shadow: 0px 0px 8px #555;
-moz-box-shadow: 0px 0px 8px #555;
box-shadow: 0px 0px 8px #555;
Do it in the image, you're already at monstrous filesize status, might as well make those do all your grunt-work rather than waste your time on something not ready for deployment on real world websites and not even out of draft. There's a reason even the lead of the HTML 5 project says it won't be real world deployable until 2022.