issue with fixed left navigation

Question

I am having a simple layout with a fixed left navigation and a centered page, now the issue in on low resolutions the fixed navigation is comping on the content area which I want to prevent, but I am not able to do so.

Demo

Any idea how I can keep my page centered and even the fixed with div just adjacent to it without overlapping my elements when screen resolution is low

What I want is like this no matter whatever resolution it is in, the page should be centered but the navigation should sit right besides the page and shouldn't overlap page

CSS

.page_wrapper {
    min-width: 750px;
    max-width: 750px;
    margin: 20px auto;
    border: 1px solid #ff0000;
}

.content_wrapper {
  margin: auto;
  max-width: 700px;
  margin-left: 120px;
}

p,
ul {
  margin: 0;
  padding: 0;
}
p {
  margin-bottom: 20px;
}
#nav {
  left: 300px;
  list-style: none;
  position: fixed;
  top: 20px;
}
#nav li {
  margin-bottom: 2px;
}
#nav a {
  background: #ededed;
  color: #666;
  display: block;
  font-size: 11px;
  padding: 5px 10px;
  text-decoration: none;
  text-transform: uppercase;
}
#nav a:hover {
  background: #dedede;
}
#nav .current a {
  background: #666;
  color: #ededed;
}
.current {
  background: red;
}

.section {
  border-bottom: 5px solid #ccc;
  padding: 20px;
}
.section p:last-child {
  margin-bottom: 0;
}

​

Answer 1

I've made an example fiddle for you, what you just need is a wrapper div and a content div which is floated to right

Demo

I've changed some of the container div layout and basically you can wrap up the contents in your container

HTML

<div class="main_container">
   <nav class="content_navigation">
      <ul id="nav">
          <li class="current"><a href="#section-1">Section 1</a></li>
          <li><a href="#section-2">Section 2</a></li>
           <li><a href="#section-3">Section 3</a></li>
           <li><a href="#section-4">Section 4</a></li>
           <li><a href="#section-5">Section 5</a></li>
       </ul>
   </nav>
   <div class="right_content">
   <div class="section" id="section-1">
      <strong>Section 1</strong>
    </div>
    <div class="section" id="section-2">
       <strong>Section 2</strong>
    </div>
    <div class="section" id="section-3">
       <strong>Section 3</strong>
    </div>
    <div class="section" id="section-4">
       <strong>Section 4</strong>
    </div>
    <div class="section" id="section-5">
        <strong>Section 5</strong>
    </div>
  </div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
}
.main_container {
    width: 900px;
    min-width: 900px;
    margin: 0 auto;
    background: #ffffff;
}
.content_navigation {
    width: 205px;
    position: fixed;
    margin-top: 120px;
}
.right_content {
    float: right;
    width: 675px;
    border-left: 1px solid #252525;
    margin-top: 25px;
}
#nav {
  list-style: none;
}
#nav li {
  margin-bottom: 2px;
}
#nav a {
  background: #ededed;
  color: #666;
  display: block;
  font-size: 11px;
  padding: 5px 10px;
  text-decoration: none;
  text-transform: uppercase;
}
#nav a:hover {
  background: #dedede;
}
#nav .current a {
  background: #666;
  color: #ededed;
}
.current {
  background: red;
}
.section {
  border-bottom: 5px solid #ccc;
  padding: 20px;
}
.section p:last-child {
  margin-bottom: 0;
}