...

View Full Version : What's wrong?



cadfan
04-09-2009, 11:38 PM
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! (http://iambonkers.webs.com/layout.html)

Thanks in advance

Excavator
04-09-2009, 11:55 PM
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 (http://www.w3.org/TR/CSS2/box.html)to see why.

cadfan
04-10-2009, 12:36 AM
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
04-10-2009, 12:47 AM
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
04-10-2009, 01:02 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum