Odd left margin on a div that i can't center

Question

for the life of me cant figure out why this div wont centre in its container.

I have a fixed top bar which has a width of 100%, and then a inner div which has a width of 750px and a margin of auto. This div however will not sit centre, but instead sit about 200px right of centre.

I already have another div centered in another 100% width container and that works fine, but this wont.

I have gone through firebug inspector and played with everything i can, and i cant seem to find why it wont sit right.

Easiest way of showing you is...

The url is:

The div i am trying to centre is the yellow one in the very top bar. It holds the page navigation (next, prev etc).

The BETA code is simply: test

Any ideas would be appreciated :) Thanks, Craig.

The HTML

<div id="sidebar">
  <!-- Content Here -->
</div>
<div id="topbar">   
    <div class="pagecontrol1">
        <!-- Content Here -->
</div>
</div>

The CSS

#sidebar {
  width:250px;
  background-color:#fff;
  height: 100%;
  float:left;
  position:fixed;
  border-right: 0px solid #333;
  z-index: 996;
  -webkit-box-shadow: 2px 0px 5px -2px #888;
  -moz-box-shadow:    2px 0px 5px -2px #888;
  box-shadow:         2px 0px 5px -2px #888;
}
#topbar {
  height: 35px; 
  width: 100%; 
  background-color:#444; 
  position:fixed; 
  z-index: 950; 
  border-bottom: 1px solid #222;
  border-top: 1px solid #222;
}
.pagecontrol1 {
   width: 750px;
   height: 100%;
   margin: auto;
   background-color: #ff0;
}

Answer 1

The 100% width is grabbing 100% of the page, so when it is shifted left by the sidebar you're seeing it pushed right by 250px. Your pagecontrol1 class should look like this:

.pagecontrol1 {
  position:fixed;
  left:250px;
  right:0px;
  height:35px; /* Instead of 100% */
  margin:auto;
  background: #ff0;
}

I added position:fixed, left:250px;, right:0px; and changed height:100% to height:35px. I edited in the browser, and it looks fine with those changes to the pagecontrol1 class.