So I am trying to create a left-sided nav bar, but after scrolling I can't get it to correctly stay to the left.

I have tried using:

position: fixed;

and

position: absolute;

However it cuts the width of the DIV down pletely.

To get a view of what I'm working with go to: http://198.50.242.77/YouBB/

I'd prefer to use strictly CSS only but if I must use JS I'll use it.

Thanks!

So I am trying to create a left-sided nav bar, but after scrolling I can't get it to correctly stay to the left.

I have tried using:

position: fixed;

and

position: absolute;

However it cuts the width of the DIV down pletely.

To get a view of what I'm working with go to: http://198.50.242.77/YouBB/

I'd prefer to use strictly CSS only but if I must use JS I'll use it.

Thanks!

• javascript
• css

• Please post all relevant CSS and HTML. It's hard I diagnose the problem with no code. If you have tried position fixed and that causes width issues, in my experience it's due to parent elements with % widths. I suggest reading up on papist ion fixed as it has some what unique behaviour. – speak Commented Aug 6, 2014 at 22:04
• You should use position not display for this... That CSS is not valid! – Steven Commented Aug 6, 2014 at 22:05
• 1 Seems fine to me, if you are talking about the white div on the left. It is responsive and get cut only on low resolutions, for which you can use CSS min-width property. Also, like the others said, it is position: fixed; – Boyan Hristov Commented Aug 6, 2014 at 22:06
• Sorry yes I meant position: fixed. – David Chalifoux Commented Aug 6, 2014 at 22:09

1 Answer 1

position: fixed is what you want. This causes the element to be removed from the flow entirely and stay in the same position even after scrolling the page.

position: absolute is similar, but it only removes an element from the flow. Scrolling a containing div (or in this case, the whole page) will still cause it to move.

I opened up your web page in Chrome, and changed the styles for #navigation to:

background: white;
height: 100%;
text-align: center;
position: fixed;
width: 18.72%;

This does what you want. You will just need to position the rest of the content to the right.