issue with fixed left navigation - html

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

From what I can tell, your "left" property on #nav is causing it to always position always 300px from the left margin. Removing that keeps the left nav on the left (instead of 300px from the left).
Instead of:
#nav {
left: 300px;
list-style: none;
position: fixed;
top: 20px;
}
try
#nav {
list-style: none;
position: fixed;
top: 20px;
}
See W3 Schools Left Property for more info.
In response to your comment "that will make position navigation to flow on the extreme left of the page" :
Add a margin-left:20px; property

Answer 2

this can be done by
#nav {
padding-left:20px;
padding-top:30px;
list-style: none;
position: fixed;
top: 20px;
}
Live Fiddle

Answer 3

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">Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
<li>Section 5</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;
}

Answer 4

use left: 50% with negative left-margin to position the #nav from the middle
jsfiddle
#nav {
left: 50%;
margin-left:-350px;
...
}

Answer 5

I tried to make something resembling what you have in the diagram, making #nav absolutely positioned wrt .left_navigation. Also removed the margin on .content_wrapper since it didn't seem to serve a purpose.
.content_wrapper {
/*margin-left: 120px;*/
}
#nav {
left:-77px;
width:76px;
list-style: none;
position: absolute;
top: -1px;
}
.left_navigation{
position:relative;
}
DEMO