Centered content with right fixed nav causes z-index problem

Question

I have a centered container layout with a right fixed nav div. To make the fixed nav stay in place when viewport resizes it's set up in some nested divs. Problem is the nav div ends up infront of the content. I can change the z-index order but I want both content and nav to be accesible as in being able to "mark" text for example. Any ideas on this? Below is link to code and and an image showing the layout structure

http://jsbin.com/aliru5/3/edit

enter image description here

Mark Steggles · Accepted Answer · 2011-04-25 13:42:00Z

1

You are making this more complicated than it needs to be, try this:

<div id="container"> <div id="content"></div> <div id="nav"></div> </div> #container { margin:0 auto; /* center container in browser */ overflow:hidden; /* clear floats */ width:900px } #content {float:left;width:640px} #nav {float:right;width:240px}

answered Apr 25, 2011 at 13:42

Mark Steggles

5,5939 gold badges43 silver badges51 bronze badges

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

2 Comments

Bo. Over a year ago

Hey, thanks! But the nav div should be fixed as in not scrolling. That's what makes this difficult.

Bo. Over a year ago

Ok, the answer is probably to set position:relative to div not invovlved in the nav setup. Doing this you can then set a z-index value. In this case the same as the nav. Should set this as the answer?

Collectives™ on Stack Overflow

Centered content with right fixed nav causes z-index problem

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related