Okay, I've had a good look at your HTML source (it's never fun looking at someone else's code!) and I see what the problem is.
Your background image on the right (that greyish box with the indentation) is in a table cell. That table is centred. Therefore, whenever you resize the browser window, the position of the table (and ergo that table cell) will change. In the meantime, your DIVs are positioned ABSOLUTELY - i.e. relative to the browser window.
Instead, you could use position: relative; to position them relative to the table cell in which they are contained. Obviously then your first DIV would be top: 0px; left: 0px;.
There is a problem with this however - you are relying on your particular font size being consistent in all browsers - if it isn't, you divs will be messed up. You CANNOT rely on a consistent font size, because most modern browsers have the option to change the font size; this will wreck your page. Many users (particularly the partially-sighted) will in fact change the default font size.
This is why I pointed you to that amazing page above - they use a technique there which is a better way of achieving your desired effect. It will work regardless of font size, since all of the text is contained within one div - and yet it wraps perfectly around the image.
