Position Fixed width 100%

Question

I have a position:fixed 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:

But this is what I'm getting here:

This is what I have done:

JSFIDDLE

.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; } 

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!

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.

Answer 1

Very simple solution that won't require the latest CSS version is not setting width at all. Instead just set right: 0, which will force the right border of the top bar to sit at the right border as can be seen in this fiddle.

.top-bar {     position:fixed;     top:0;     left:250px;     right:0;     height:54px;     background:#090909;     z-index:1000; } 

I've added a red border so it's easier to see where the box ends.

Answer 2

Instead of using left: 250px use padding-left:250px in conjuction with box-sizing: border-box:

.top-bar {     position:fixed;     top:0;     left:0;     width:100%;     height:54px;     background:#090909;     z-index:1000;     padding-left: 250px;     -moz-box-sizing: border-box:     box-sizing: border-box: } 

FIDDLE