2

I have a centered container div, containing a content div to the left and a nav div to the right. I want the nav div to be fixed, as in not scrolling with content. See image below. Is this doable?

enter image description here

Improve this question

1 Answer 1

Reset to default
4

This is indeed possible, use this in your CSS:

.navElement { position: fixed; top: 10px; /*your distance from the top*/ left: 10px; /*your distance from left*/ }

Make sure it is the first element in the document flow, right after <body> and it should behave as you described.

An example can be seen here.

Updated example for fixed position parent here.

Updated example for parent centered and nav fixed.

Improve this answer
Sign up to request clarification or add additional context in comments.

15 Comments

Wow that was fast, and like that hjsfiddle.net! But this is a fixed div 10/10 px from top left corner right? Not to the right in a centered parent div?
Yes, if you want it to stay fixed to the top of the screen, you have to use position: fixed;. With this you can't use margin centering, (margin: 0 auto;) so you can use the left property to place it as you like. You can use px, em, % or whichever unit you choose as your measurement.
And that is the question. I want the nav div in a position:fixed relative the parent div, not the browser window. Cant see how using em or % in css will get a correct behaviour if browser is resized. Would have to be some math involved then.
Aha, ok then, if the parent is position fixed, you can of course use margin: 0 auto ;) updated my answer with a new example :)
Parent is centered as in image above.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.