Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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 h1,#midCol h1,#rNav h1 {
         font:bold .8em Courier;
         background:#ffffff;}
    
    </style>
    
    <div id="main">
    <div id="rNav"><h1>rNav</h1></div>
    <div id="lNav"><h1>lNav</h1></div>
    <div id="midCol"><h1>midCol</h1></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.

    the effect 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

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by lipstud View Post
    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.
    Try these changes:
    Code:
    #main {
         width:100%;
         margin:0px;
         /* padding:1px; */
         background:#FFFFFF;
    }
    #midCol {
         position:relative;
         visibility:visible;
         top:5px;
         /* left:165; */
         /* width:inherit; */
         margin-left: 154px;
         margin-right: 154px;
         /* height:100%; */
    }
    I think that you should use margins instead of offsets (top, right, bottom, left) to move around with elements. That tends to work better. Relative positioning is unfortunately associated with many bugs in IE.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •