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

Bo.
  • 1,497
  • 3
  • 11
  • 21

1 Answers1

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.

Kyle
  • 65,599
  • 28
  • 144
  • 152
  • 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? – Bo. Feb 21 '11 at 13:01
  • 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. – Kyle Feb 21 '11 at 13:11
  • 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. – Bo. Feb 21 '11 at 14:02
  • Aha, ok then, if the parent is position fixed, you can of course use margin: 0 auto ;) updated my answer with a new example :) – Kyle Feb 21 '11 at 14:19
  • Parent is centered as in image above. – Bo. Feb 21 '11 at 14:21
  • You cannot center the parent if you use position: fixed;. You can only center the contents. – Kyle Feb 21 '11 at 14:23
  • Hm, you are misunderstanding. parent=centered, nav=fixed – Bo. Feb 21 '11 at 14:30
  • sure. In image above it is
    – Bo. Feb 21 '11 at 14:35
  • Perhaps a little closer. I want the menu to be to the right of the content. And content+menu to be centered in browser window – Bo. Feb 21 '11 at 14:47
  • Better, but content+menu is not centered – Bo. Feb 21 '11 at 15:00
  • This answers your original question. If you have further doubts, please ask another question detailing what you want to achieve and what you're having problems with, providing your current source code. – mingos Feb 21 '11 at 15:04
  • I think it's pretty clear in text and image I'm looking for content+nav in a centered container div. – Bo. Feb 21 '11 at 15:10
  • So what happens now? Just wait for next guy or what? How does 3 peoples thinking this is a good answer affect the visibility of this question? Is there an algo for this? – Bo. Feb 21 '11 at 21:12
  • We've given you more than enough to work from, and all the answers are here, that is what the upvotes mean. Like Mingos said, if you need further advice, ask another more detailed question :) – Kyle Feb 21 '11 at 21:18
  • Solved but a new problem arose: [link] (http://stackoverflow.com/questions/5778832/centered-content-with-right-fixed-nav-causes-z-index-problem) – Bo. Apr 25 '11 at 13:43