css - Child Div Percentage of Parent Div -

i trying tocreate fixed position nav bar 25% of container div, reason, nav bar being sized @ 25% of viewport , i'm not sure how fix it. i've replicated issue in jsfiddle: http://jsfiddle.net/g6yjg/1/

edit: although changing positioning of nav div fixed absolute fixes size problem, causes navigation not able scroll page. there work around allow me fix position nav , still have 25% of parent container?

here code:

html:

<div class="container">             <nav>                 <ul>                     <li><a href="index.html">home</a></li>                     <li><a href="#">coffee menu</a></li>                     <li><a href="#">locations</a></li>                     <li><a href="#">about</a></li>                 </ul>             </nav>              <section class="main">                 test             </section> </div> 

css:

body {     background-color: rgb(210,159,182); }  .container {     width: 70%;     margin: 20px auto; }  nav {     width: 25%;     float: left;     position: fixed; }  nav ul li {     line-height: 50px; }  nav ul li {     font-family: 'grand hotel', cursive;     font-weight: normal;     font-size: 31px;     color: rgb(104,58,122);     font-weight: 700;     text-decoration: none;     display: block; /* reinforce default space */     border-top: 1px solid rgb(104,58,122); }  .main {     float: right;     width: 75%;     height: 2000px;     background-color: rgb(255,255,255); }  .fix {     clear: both; } 

it is due position: fixed;, gives size of 148px. changing position:relative drops width 101px.

if need same width still fixed, can define invisible wrapper that's same percentage container, , set position: fixed, having relative/25% nav inside.

like so: fiddle