CSS -ve margins / horizontal scroll

Hi. I'm fairly new to CSS, and completely new to this board.

I am trying to reconstruct an existing table-based site to cleaner code and use CSS positioning. I am using negative left margin technique to centrally position the main divs of my page. The problem I am encountering is that when I run a small test to check window resizing as follows ...

Foo

... I am losing the content (ie "Foo") when I close up the width of the window. Although the horizontal scroll bar does kick in it does not scroll far enough to the left to pick up the text. This happens both on IE and NS.

In my CSS file I have:

body {
width: 700px;
margin-top: 5px;
}

div#header {
position : absolute;
left:50%;
margin:0px 0px 0px -350px;
width : 700px;
height: 150px;
background-image: url(images/OPipsHead1.gif);
background-position: left;
background-repeat: no-repeat;
}

div#navigation {
position : absolute;
left:50%;
margin:150px 0px 0px -350px;
width : 250px;
height: 150px;
background-image: url(images/OPipsNavBG.gif);
background-position: left;
background-repeat: repeat-y;
}

It appears to be a problem that is being caused by using the negative margin to center everything. If I take
left:50%;
margin:-350px;
out of the CSS positioning above then the scroll works okay (although obviously everything is stuck on the LH side.

Any ideas how I can achieve the positioning without sacrificing the scroll when the window is resized?

Thanks in advance.