Web Analytics Made Easy -
StatCounter What's wrong? - CodingForum

Announcement

Collapse
No announcement yet.

What's wrong?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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 a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

    Comment


    • #3
      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.

      Comment


      • #4
        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 a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

        Comment


        • #5
          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

          Comment

          Working...
          X