title: lock fixed header regardless of scrollbar to stop it moving
body: <p>I have a site where the top header is fixed 100% width, and within that DIV I have another div 980px wide, centered.</p>
  
  <p>When I load a which creates a browser scrollbar (due to page being long), the page loads and header loads but then jumps to the left, to accomodate the scrollbar.</p>
  
  <p>I know I can add <code>overflow-y:scroll;</code> to the stylesheet to make a scrollbar always be there, but, that's no good as i use jquery fancybox v.2 which, if you do this on a long fancybox pop up, gives you two scrollbars. Fail.</p>
  
  <p>So, is there a way to lock the middle section of the header as if a scrollbar is there but without there actually being one there? And it be in the same position regardless of whether scrollbar present or not.</p>
  
  <p>This is CSS I'm using right now:</p>
  
  <pre><code>#topbar {
  width:100%; 
  height:51px;
  margin:0;   
  padding:0;  
  position:fixed;
  z-index:1000;
  /*Making sure it sticks to left of window in IE7*/
  top:0;
  left:0;
  float:left; 
  background-color:#eeeeee;
  border-bottom:1px solid #333;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
  }
  
  .header { 
  width:980px; 
  margin:0 auto; 
  position: fixed; 
  z-index: 1001; 
  left: 50%; 
  margin-left: -490px; 
  }
  </code></pre>
  
  <p>Its called e.g. <code>&lt;div id="topbar"&gt;&lt;div class="header"&gt;blah blah&lt;/div&gt;&lt;/div&gt;</code></p>
  
  <p>Is there a solution?</p>