how to make a shadowbox stay in the same place when zooming in/out?

Question

I am trying to make a shadowbox stay in the same place even if i zoom in or out on a webpage. I tried with making the sizes in procents rather then pixels, but i dont know exactly what combination of properties should i use.

This is the result i want to achieve: the exterior shadow box effect from here http://www.harpersbazaar.com/

#shadowbox {
margin: 5px 450px 5px;
box-shadow: 0px 0px 5px rgba(150, 150, 150, 0.75);
position: relative;
z-index: 0;
width: auto;
border-top: 1px solid rgb(223, 223, 223);
initialHeight: 100%;

this is the page where it is implemented: http://filldevoid.com/test/ (it shown different in the same google chrome, but on different computers))

(i want the shadow box to be in the same place regarding the content (i mean, be in the same position in the design, even if i zoom in) i want the content to be nicely inside the box, like on harpersbazar example.)

Answer 1

Add this:

#shadowbox{


    width: 970px;
    left: 50%;
    margin-left: -485px;


}

Answer 2

try this

 #shadowbox{
   width:1060px;
   margin:0 auto;
    box-shadow:0 0 5px rgba(150, 150, 150, 0.75);
   border-top:1px solid #DFDFDF;
    z-index:1;
   position:relative;
        }