Css on print preview changes

[cdoggg94]

Attached I have an image of a page that looks the way I want (jodyNormal.jpg). When I go to the print preview of the page, and when it prints, the div in the top right moves to the left. (jodyPrint.jpg)

this is the CSS for that Div:

#fertilizerCSS{
position:absolute;
height:379px;
width:397px;
left:391px;
top:134px;  
}

[cdoggg94]

My first thought was that the Div had the same name as one of the form elements, so I changed the name of the Div to #fertilizerCSS but it was not the issue.

[cdoggg94]

this is the rest of the CSS on the page:

<style type="text/css">

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #000000;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
}

#wrapper{
position:relative;
height:100%;
width:800px;
margin:0px auto;
}

#header{
position:absolute;
height:148px;
width:309px;
left:2px;
top:14px;
}


#printPage2{
position:absolute;
height:65px;
width:50px;
top:26px;
left:645px;
}

#fertilizerCSS{
position:absolute;
height:379px;
width:397px;
left:391px;
top:134px;  
}

#services{
position:absolute;
height:632px;
width:760px;
left:0px;
top:526px;
}

#clientInfo{
position:absolute;
height:286px;
width:384px;
left:3px;
top:170px;
}

</style>

[pixelsoul]

It's really hard to say by just looking at the CSS. It appears that it is getting pushed over to the left rather than sliding over there, maybe from the "print this page" button?