css - Fixed div next to a centered div -

I have a webpage that contains scrollable content. This content is wrapped within # content, which is centered on the page . Now I have to show a navigation bar that looks in the 50 pix box for the content. This time there should be a fixed position (should not be scrolled).

This is what I have tried to do so far:

  #nav {position: fixed; Top: 50%; Margin top: -200px; Left: 15%; Background: #FFF; Width: 100px; Height: 400px; Range radius: 50px; } # Content {status: relative; Width: 800 pixels; Margin: 0 px auto; Padding-top: 100px; }   
 Which I clearly do not want, because now the NAV is 15% from the left of the screen.  
 Here is a picture I want to explain, received.    
 
 
 A little tricky solution is  Status: Fixed  elements are always relative to the browser window (more less). This means that it will always ignore its original dimensions and position, even with  status: relative  set.  Solution   left  is not set at all  
 Here's what you need to do:  HTML   
  & lt; Div class = "content" & gt; & Lt; Div class = "fake" & gt; & Lt; Div class = "nav" & gt; & Lt; / Div & gt; & Lt; / Div & gt; Content & lt; / Div & gt;   
  CSS   
  .fake {position: absolute; Left: -50px; Top: 0; } .nav {status: fixed; Top: 50px; Width: 40px; Height: 100 pixels; Background: # C11; } .content {status: relative; Width: 800 pixels; Height: 1000px; Margin: 0 px auto; Background: #ccc; }   
  
 Of course some values ​​are just to show.