Search code examples
htmlcsslayoutfixedcss-position

Fluid layout with position:fixed nav

So I have a fluid layout with a min-width on the body of 960px. I have a fixed header, which works as intended, and a right-side nav bar which I want to remain fixed on the vertical scroll... this also works.

However if I resize the window to less than 960px width I would like the right hand nav bar (position:fixed) to stay to the right on the horizontal scroll instead of overlaying the content.

#mainnav {
    width:20%;
    height:100%;
    margin-left:80%;
    position:fixed;
}

#mainhead{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:46px;
}

#contentcontain{
    margin-top:46px;
    width:80%;
}

I'm sure I could do it with using JS but I was just wondering if there is a more simple way to it without JS.

Thanks,

Dom

Solution

  • An element with position:fixed is pulled out of the normal flow of document layout and will always sit on top, unless you give it a z-index value.