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 5 of 5

Thread: What's wrong?

  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    80
    Thanks
    1
    Thanked 0 Times in 0 Posts

    What's wrong?

    Could someone have a look at the webpage i'm working on and tell me why the "nav" and "content" appear twice plus a scrollbar? please.

    You can view the webpage HERE!

    Thanks in advance

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello cadfan,
    It's not really appearing twice. You're seeing float drop because your box model is off.

    You have:
    #container at width:600px;
    #nav at width:150px plus the 2px of border
    #content at width:450px; plus it's 2px border.
    In otherwords, #nav and #content are 4px too wide to fit side by side. See box model to see why.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    80
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Excavator
    I have never heard about float drop before. Have corrected the width but the scrollbar is still there? Suppose i will have to have a good read all about the Box Model. Thanks once again for the help.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by cadfan View Post
    Hi Excavator
    I have never heard about float drop before. Have corrected the width but the scrollbar is still there? Suppose i will have to have a good read all about the Box Model. Thanks once again for the help.
    The online version hasn't changed. If you update it, maybe we can see what's causing the scrollbar. (probably left and right borders on other 600px wide elements)

    Try making your CSS look like this -
    Code:
    body {
    margin: 0;
    padding: 0;
    text-align: center;
    }
    
    #container {
    width: 600px;
    background: #f0f8ff;
    position: relative;
    margin: 30px auto;
    overflow: auto;
    border: 1px solid #0000ff;
    }
     
    #header {
    width: 600px;
    height: 150px;
    background: #d5e9d7;
    border-bottom: 1px solid #0000ff;
    }
    
    
    #nav {
    width: 150px;
    height: 300px;
    background: #fff5e8;
    border-right: 1px solid #0000ff;
    float: left;
    }
    
    #content {
    height: 300px;
    margin: 0 0 0 151px;
    background: #a4d4b0;
    }
    
    #footer {
    width: 600px;
    height: 100px;
    background: #fac6aa;
    border-top: 1px solid #0000ff;
    clear: both;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Jun 2008
    Posts
    80
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi once again Excavator
    I extended the width of the container by 2px and the scrollbar has gone. So all that remains for me now is to try and get it validated. Cya


  •  

    Posting Permissions

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