Webuser Forums: Help with CSS divs

hey everybody, hope someone can help me with this

i did a tutorial on webreference to recreate their hope page, and i found it really fun and interesting and its made me want to learn more about css and divs

ive got some really basic code, and i think its probably a really simple reason that its not working. but for someone whos just started, its stopped me in my tracks

Code:

  <style type="text/css">
body {
     background:#FFFFFF;}

#main {
     width:100%;
     margin:0px;
     padding:1px;
     background:#FFFFFF;}

#lNav {
     float:left;
     position:relative;
     visibility:visible;
     top:5px;
     left:5px;
     width:150px;
     height:100%;}

#midCol {
     position:relative;
     visibility:visible;
     top:5px;
     left:165;
     width:inherit;
     height:100%;}

#rNav {
     float:right;
     position:relative;
     visibility:visible;
     top:5px;
     right:5px;
     width:150px;
     height:100%;}
            

#lNav,#midCol,#rNav {
     background:#ffffff;
     border-top:4px;
     border-left:1px;
     border-right:1px;
     border-bottom:1px;
     border-style:solid;
     border-color:#000000;}


#lNav hd,#midCol hd,#rNav hd {
     font:bold .8em Courier;
     background:#ffffff;}

</style>

<div id="main">
<div id="rNav"><hd>rNav</hd></div>
<div id="lNav"><hd>lNav</hd></div>
<div id="midCol"><hd>midCol</hd></div>
</div>

what i want to happen - rNav to stay on the right side and not change width, lNav to stay on the left and not change width, and the div in the middle to resize according to the width of the web browser.

it works in the tutorial that i did on webreference, but when i try to recreate the effect it doesnt

ive really tried my best (which probably isnt much) at fixing the problem, but its still not working

can anyone help? (remember im new to it, so try and go easy lol)

lipstud

Edited by lipstud (Fri Jun 01 2007 01:16 PM)

Post Extras