title: Position Fixed width 100%
body: <p>I have a <code>position:fixed</code> left column at 250px wide with 100% height and I'm trying to place a fixed, fluid horizontal bar at the top but to the right of the left column, like this example:</p>
  
  <p><img src="https://i.stack.imgur.com/0ckAd.jpg" alt="enter image description here"></p>
  
  <p>But this is what I'm getting here:</p>
  
  <p><img src="https://i.stack.imgur.com/3LcVs.jpg" alt="enter image description here"></p>
  
  <p>This is what I have done:</p>
  
  <p><a href="http://jsfiddle.net/jGP5Y/" rel="noreferrer">JSFIDDLE</a></p>
  
  <pre><code>.page-wrapper, html, body {
      width:100%;
      height:100%;
      margin:0;
      padding:0;
  }
  
  .left-column {
      position:fixed;
      top:0;
      left:0;
      z-index:1000;
      width:250px;
      height:100%;
      background:#090909;
  }
  
  .top-bar {
      position:fixed;
      top:0;
      left:250px;
      width:100%;
      height:54px;
      background:#090909;
      z-index:1000;
  }
  </code></pre>
  
  <p>How can I make this fixed top bar span 100% the width of the screen, without spilling out. I'm hoping this is a simple fix, as I've just spent ages building a fairly complex responsive template and have just noticed, after adding content, that things in the right side of my top bar were disappearing off screen!</p>
  
  <p>I do have one idea but may not be the most ideal, so interested in others suggestions first. The left fixed column could be given a higher z-index value than the top bar, remove the left-margin from the top bar, but instead put a left-margin on the top bar contents, the same as the width of the left column. Sounds confusing but possible.</p>