If you want the top banner to stay the same as the middle part, you will have to position the top banner absolutely, like you have for the middle part..
code:
<div id="text" style="position:absolute; left:125px; top:250px; width:1005px; height:420px; z-index:4; background-color: #0066FF; layer-background-color: #0066FF; border: 1px none #000000;">
Otherwise when the page resizes, the banner will move, but the middle wont, which from what I can tell is the problem you are referring to..
If you want the middle part to move like the banner, you can just align the middle to center, like you did for the banner..
code:
<div id="banner" align="center">
Or, you can get rid of that all together, and center everything on the page using css.. for that, there is basically 2 steps (your content all goes inside the container div)
code:
body {
margin: 0px;
text-align: center;
}
#container {
margin: 0 auto;
text-align: left;
width: 900px;
}
And might I sugest using a smaller width, it is quite large if you want to be resizing the page.. Anyways, hope that helps
/ 
