Html scroll bar problem - html

Question

I'm designing a fairly simple web site but as I don't have much experience I have a very simple question.
I've done the layout in a way that displays all the necessary information without the need of scrolling down. But for some reason it's there.
The site's css is as following:
#charset "utf-8";
/* CSS Document */
html {height:100%;width:100%; margin:0;}
body{
height:65%;
font-size:100%;
font-family:Calibri;
background-image:url(/images/gradient.png);
background-repeat:repeat-x;
background-color:#FFF0;
color:#00080;
margin-left:15%;
margin-top:3%;
margin-right:15%;
width:65%;
}
#banner {
height:40%;
background: url(/images/banner.jpg) right scroll no-repeat;
}
#left_container{
width:20%;
height:80%;
}
#left_container img{
width:100%;
}
a{
text-decoration:none;
color:#FFF;
border:none;
}
#menu{
width:100%;
height:85%;
font-size:120%;
}
#menu td{
background:#999;
color:#FFF;
padding:4%;
}
#menu tr td a:hover{
background:#CCC;
color:#333;
}
#right_container{
width:75%;
height:auto;
position:relative;
left:+26%;
top:-80%;
}
#right_container h2{
font-size:300%;
}
#right_container h3{
font-size:200%;
}
But the web site looks like this (and the scroll appears when I set the right_container h2 title (home) size in the css bigger than 190%....but I need it to be as I set...or it will be to small).How can I remove the scroll bar?
image -> http://i29.tinypic.com/hx3uy8.jpg

Answer 1

You can control the appearance of scrollbars in CSS by using the Overflow property. So you could try adding overflow: hidden to your BODY CSS declaration and see if that helps.