psd to html/css test problem

i make my own psd design to train on,
i always get problem in the differents in resolution [ 1280 x 1024 and higher]
my screen is 1280 x 1024 when i use position relative it not work in higher resolution
the same is padding margin ,

this is my psd design:


http://s8.postimg.org/cwhstvw6d/psd_t.png
file download:

http://speedy.sh/wRYGm/vst.psd

Code (markup):

[lest focus in the header[the red part] with 2 boxes in it]

html structure
<div id="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
css
#header{
background-color: #d02c2c;
width: auto;
height: 168px;
}

.logo{
background-color: #6a49e5;
width: 222px;
height: 100px;
}

.nav{
width:409px;
height: 58px;
background-color: #6a49e5;
}


psd data

logo position:
top: 30px;
left: 71px;

nav position:
top:48px;
left: 849px;


header:
width: 1280px;
height: 165px;
color: #d02c2c;

/******************** *****************/

if it was the same color i was put it in the body element
and then make wrap div and make width 1280;
and it was contain all the div id header main content and footer;

 

If you do not have any difficultly with width and height, please try to 960 width and height auto. Thanks

 

Most common mistake you can make -- thinking you can make a viable for web deployment layout (if you give a flying purple fish about accessibility) by dicking around in some paint program.

Playing around making goofy pictures in Photoshop is putting the cart before the horse, and a back-assward method for 'designing' a website -- no matter how much the artsy fartsy types in the industry seem to promote it as a viable method. It pisses all over accessibility, and usually results in useless garbage broken layouts.

Start out semantically markup up your actual content or at least a reasonable facsimile, then progressively enhance it with CSS for your media targets for your various layoutS -- and yes, that's plural because you should have an elastic, semi-fluid AND responsive design if you actually care about people using the page. Then and only then go into Photoshop to make the graphics (if any) you are going to hang on the layout... since nobody visits websites for the goofy layouts or goofier graphics hung around the content, they visit FOR the CONTENT.

Fixed widths, fixed heights, absolute positioning, quite possibly DIV for nothing or non-semantic use of DIV; you're in /FAIL/ mode and you've not even plugged in any actual content yet!