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.