html - Position Fixed width 100% -


i have position:fixed left column @ 250px wide 100% height , i'm trying place fixed, fluid horizontal bar @ top right of left column, example:

enter image description here

but i'm getting here:

enter image description here

this 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 make fixed top bar span 100% width of screen, without spilling out. i'm hoping simple fix, i've spent ages building complex responsive template , have noticed, after adding content, things in right side of top bar disappearing off screen!

i have 1 idea may not ideal, interested in others suggestions first. left fixed column given higher z-index value top bar, remove left-margin top bar, instead put left-margin on top bar contents, same width of left column. sounds confusing possible.

very simple solution won't require latest css version not setting width @ all. instead set right: 0, force right border of top bar sit @ right border can seen in this fiddle.

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

i've added red border it's easier see box ends.


Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -