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:
but i'm getting here:
this have done:
.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
Post a Comment