Html/Css website showing a scroll bar which doesn't go anywhere

I am creating a website and I am adding css to a few things

I have this css code

#Comment
{
position:relative;
left:350px;
bottom:165px;
}
#SuggestionBox
{
position:relative;
right:320px;
}

everything is aligned to the center and then moved properly

this is to cope with all the parts colliding when I made the browser window smaller

the weird thing is with this code the scroll bar appears but there is nothing rea开发者_JS百科lly there

here's a visual aid:

[deleted]

and:

[deleted]

and finally this is what happens when I delete that css code

[deleted]

I am completely stumped I don't know what it could be

if you need it here is all of my css code:

body
{
background-image:url("images/background.jpg");
}
a:hover
{
color:rgb(255,0,0);
}
table
{
background-color:rgb(255,255,255);
}
#Comment
{
position:relative;
left:350px;
bottom:165px;
}
#SuggestionBox
{
position:relative;
right:320px;
}

thanks

Luke

---

first of all for firefox download addons such as

firebug and developer tools

you can select the actual fields and it will display which div is making its width be like that. it will help you alot.

but try this

body { overflow:hidden; }

it will hide anything outside of your specified widths so that that doenst happen.