title: Centering a fluid width div within a fixed div to pin to top of viewport
body: <p>ok, so I'm designing a page that requires a 50% width div down the centre of the page - no problem.  I also need a 50% wide header across the top of my screen - no problem.  Finally I need to have that header in a fixed div so that it remains at the top of my screen when I scroll - and that's where I bump into a problem, no matter how hard I try I can't seem to get that top div centered presumably because it's a fluid width and I can't really specify a pixel margin?</p>
  
  <p>Here's the code I've been working on (keeping things simple for now)....</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="topwrapper"&gt;
          &lt;div id="top"&gt;
              &lt;div id="topleft"&gt;&lt;/div&gt;
              &lt;div id="topright"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="table"&gt;
          Lorum Ipsum to fill here.
          &lt;div id="left"&gt;&lt;/div&gt;
          &lt;div id="right"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS.....</p>
  
  <pre><code>#wrapper {
      overflow:         auto;
      position:         absolute;
      top:              0px;
      left:             0px;
      height:           100%;
      width:            100%;
      background-image: url('images/background.jpg');
  }
  
  #table {
      position:         relative;
      margin:           0 auto;
      width:            50%;
      background-image: url('images/midmiddle.png');
      padding:          50px;
      padding-top:      130px;
  }
  
  #topwrapper {
      position:    fixed;
      margin-left: -112px;
      left:        50%;
      width:       50%;
      z-index:     20;
      height:      169px;
  }
  
  #top {
      position:         relative;
      margin-left:      -8px;
      left:             -50%;
      width:            100%;
      background-image: url('images/topmiddle.png');
      z-index:          20;
      height:           169px;
      padding-left:     112px;
      padding-right:    112px;
  }
  
  #left {
      position:         absolute;
      margin-left:      -162px;
      top:              0px;
      width:            112px;
      height:           100%;
      background-image: url('images/midleft.png');
      z-index:          10;
  }
  
  #right {
      position:         absolute;
      right:            -112px;
      top:              0px;
      width:            112px;
      height:           100%;
      background-image: url('images/midright.png');
      z-index:          10;
  }
  
  #topleft {
      position:         absolute;
      margin-left:      -168px;
      top:              0px;
      width:            112px;
      height:           169px;
      background-image: url('images/topleft.png');
      z-index:          10;
  }
  
  #topright {
      position:         absolute;
      right:            -56px;
      top:              0px;
      width:            112px;
      height:           169px;
      background-image: url('images/topright.png');
      z-index:          10;
  }
  </code></pre>
  
  <p>So I've got my main wrapper at 100% wide and high to take the lot, the topleft, topright, left and right divs are within the main div to repeat the sides of my box, but the top is where I'm stuck.</p>
  
  <p>The code I've posted <em>actually</em> works but as you can see it's a very convoluted workaround, most margins are to do with my side image dimensions but the #top -8px is the only way I can seem to get around it to work - there must be an easier way?!</p>
  
  <p>Many thanks in advance for any help :)</p>
  
  <hr>
  
  <p>thanks for the input - sorry about the code formatting, I put four spaces before my CSS but I guess you guys like it in a list rather than line - sorry, old habits....!</p>
  
  <p>I've managed to get it working to an extent again with putting a 25% left and right on the topwrapper, a 100% width on the top and margin of -120px......now looking at that (given that my images are 112px wide) I've picked up and extra 8px somewhere as can also be seen in the original code (margin-left of -8px).  Very confused as to how that's in the equation....but it's working!</p>
  
  <p>I'll have a look at that fiddle, not something I'm familiar with so looking forward to learning something new :)</p>
  
  <p>Many thanks for your help everyone :)</p>