What's wrong?

[cadfan]

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

[Excavator]

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.

[cadfan]

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.

[Excavator]

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 -

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;
}

[cadfan]

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