Screen resolution display problem -- Div Layer

I am trying to place form on an image, i'm using div layer for the form table to be positioned on the image, but when checked in 1024 by 768 Pixels resolution its coming as required to be positioned and below that resolution also it's properly placed both in IE and Firefox...but when increasing the resolution the form is getting more shifted towards left and with the increase in the resolution pixels, shifting is more towards left. Can i please have a fix for it


Here is the code and is the only CSS code using...

body {
background-color: #0746C7;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#apDiv1 {
position:absolute;
left:610px;
top:479px;
width:263px;
height:191px;
z-index:1;


}
#apDiv2 {
position:absolute;
left:288px;
top:850px;
width:213px;
height:192px;
z-index:1;

 

Could you post a link to the actual site that is giving you problems?

 

Can you provide a link?? the code you've shown can't have 2 divs inside each other as is left 610 the other is 288?

 

Hi i can help you to solve your problems please try to use one div in absolute and one in relative position that may solve you issue if still facing any problem kindly send me your url of issues so i can solve it much better and faster. thanks

 

Don't use absolute positions as you will get the problems you're describing; instead have relative and define their location with margin and padding

 

wrap them with relative positioned div.

i.e

#wrapper{
position:relative;
width:640px;
height:480px;
margin:0 auto;
}

Code (markup):

Wrap them with <div id=wrapper> , then recalculate their absolute coordinate ( it'll be calculated from the top left of #wrapper ), then as the wrapper side margin is auto, it will always be placed on the center of the screen.
Hope this help.