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
Comments
Post a Comment