View Full Version : navigation bar is fixed while page content stil scrolls?

10-04-2010, 12:42 PM

Hi again

how would I go about making the grey bar continue all the way across the screen, but keep the nav stuff in the middle. the background image is fixed so in theory I can add the side portions of the grey bar to that. So I guess my question really is how to make the nav bar not scroll off the screen with everything else?

10-04-2010, 12:57 PM
Try wrapping the nav bar in another div but move the whole thing out of the wrapper (so it ends up being full width). Then wrap the nav bar again with a width and auto margins to centre it. If you then don't want it to scroll off the screen you can use position:fixed; << usual story with IE6 though!

10-04-2010, 01:12 PM
Have just read that back... Does it make any sense?

10-04-2010, 03:22 PM
yep makes perfect sense, cheers Corrosive.

10-04-2010, 04:19 PM
That's good, I was half expecting you to say 'What the hell are you talking about?' ;)

10-04-2010, 05:01 PM
position:fixed; << usual story with IE6 though!

If you want position fixed also working in IE6 then this piece of CSS will do the trick.

* {

html, body {
height: 100%; overflow:auto;

body #fixedElement {
position:fixed !important;
position: absolute;
bottom: 0;

10-04-2010, 05:02 PM
Nice tip, I like that one :)

10-04-2010, 06:17 PM
Nice tip, I like that one :)

Yes, just in case you might need it, but I didn't invent this little trick... I'm just searching for these kind of things on the net when I need it... it's one of those many snippets that's sitting in my code snippets folder. :)

Here's my code snippet folder:

Just joking :) nonetheless a very handy site