Fixed div next to a centered div

Question

I have a webpage in which there is scrollable content. This content is wrapped inside #content, which is centered on the page. Now I want a navigation bar to appear 50px left to the content. This bar should have a fixed position (shouldn't scroll).

This is what I have tried so far:

#nav {
position: fixed;
top: 50%;
margin-top:-200px;
left:15%;
background: #FFF;
width: 100px;
height:400px;
border-radius: 50px;
}


#content {
position: relative;
width: 800px;
margin: 0px auto;
padding-top: 100px;
}

Which is obviously not what I want, because now the nav is 15% from the left of the screen.

Here's an image to illustrate what I want to achieve.

Answer 1

There's a bit tricky solution. Elements with position: fixed are always relative to the browser window (more less). This mean it will always ignore it's parent dimensions and position, even with position: relative set. The solution is not to set left at all.

Here's what you need to do: HTML

<div class="content">
  <div class="fake">
    <div class="nav"></div>
  </div>
  content
</div>

CSS

.fake {
  position: absolute;
  left: -50px;
  top: 0;
}
.nav {
  position: fixed;
  top: 50px;
  width: 40px;
  height: 100px;
  background: #c11;
}
.content {
  position: relative;
  width: 800px;
  height: 1000px;
  margin: 0px auto;
  background: #ccc;
}

Working example.

Of course some values are just for show.

Answer 2

I already found the solution.

#nav{ 
left:50%; 
margin-left:-550px;
}

I just gave it left:50% and a margin-left of half the width of the content + 50px + the width of the navigation bar.

Answer 3

just put nav inside content

<div id="content">
  <div id="nav"></div>
   .....
     ......

</div>

then

#nav {
position: fixed;
top: 50%;
margin-top:-200px;
left:-100px;
background: #FFF;
width: 100px;
height:400px;
border-radius: 50px;
}