This is my layout http://examples.awardspace.com/news.html

If you look at 1024x786 it looks fine but when you look at it on 800x600 you see the div layer doesn't move with the layout. How can I make that div layer move along with layout as the layout position is centered

Well, the problem's a pretty basic one: your status monitor is positioned 174 pixels from the left of the screen. It will stay at 174 pixels regardless of the position of your other elements, so when the window is wider than the resolution in which you designed your site, the <div> will be to the left where it should, when the res is smaller, it will appear to the right. Absolute positioning separates elements from the normal page flow.

Because you're mixing table layouts (booo!) with CSS positioning (yaaay!), it can make your problem a bit difficult to fix. The simplest way for you might be this: get rid of the absolute positioning on that <div> element (you can also get rid of id="Layer2" as it isn't actually doing much), cut your image map and the space below it into two images, turn the single table cell which held your image map into two table cells (one for the shorter map and one for the bottom left-hand corner image), set the image for your bottom left-hand corner as the background image for the bottom left-hand table cell, and put your status monitor <div> inside that bottom left-hand table cell. With the absolute postioning gone, it will now flow with the normal page layout and be in that bottom left-hand corner regardless of the page width.

The best method would require a complete reworking of your site and that you gain a better knowledge of CSS. Your main layout would be contained inside a single <div> that is centered with CSS absolute positioning. You would combine your header and orange border parts into a single image. Set this image as the background of the centered <div>. Child elements that are positioned absolutely inside of their parent element, will be positioned relative to the edges of their parent element (top:30px would be 30 pixels from the top of the containing <div>, not the body). Because of this, you would absolutely position the rest of your elements - like your status monitor, image map, and iframe - inside the main <div>. You would then be done and everything would flow wonderfully.

Here is an example of how CSS absolute positioning can be used: http://jfweb.fastmail.fm/center/center.htm