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 lef

Answer 1

Try this

.left-column {
    float:left;
    width:150px;
    height:100px;
    background:#090909;
    color:white;
}

.top-bar {
    margin-left:150px;
    background:yellow;
    border:2px solid red;
}

http://jsfiddle.net/jGP5Y/87/

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

Answer 3

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.