css messes up on different resolution - html

Question

While developing, lets say i declared the following css properties
.buttons-pos {
/*margin: 0px 20px;*/
padding: 10px;
display:inline-block;
overflow:hidden;
height:20px;
position: relative;
right:-550px;
background-color: #E6E6E6;
position: relative;
text-align: justify;
border: 1px solid;
border-color: #E6E6E6;
border-radius: 3px;
}
css for two blue buttons:
.checksheet {
/*margin: 0px 20px;*/
left: 400px;
top: 45px;
position: relative;
}
.nchecksheet {
/*margin: 0px 20px;*/
left: 680px;
top:2px;
position: relative;
}
This looks perfectly fine in my computer but when i check at other computers.. the position is all messed up?
What is a way to solve this issue?
Attached screen shot.
Ignore the gray bar...for now..
The blue buttons you see..
That is the in the center of screen in my laptop..
But here.. it has shifted to left.
If I look this in my laptop..
The blue buttons will be in the center of my screen
but the gray bar will be shifted on right..

Answer 1

I didn't go through your code in depth, but your problem is almost certainly because of hardcoding the positions and dimensions in pixels. When you design on a higher resolution device and later check on lower resolutions devices, you'll find that your layout is messed up.
You should probably use percentages in laying out your page if you want it to be fluid.
Another solution, which might suit your needs better is designing for the lowest common denominator. This essentially means, in this case, that you decide what the lowest resolution your page will be displayed on is, and then design for that resolution, centering the page for other resolutions.