title: Html scroll bar problem
body: <p>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:</p>
  
  <pre>
  @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%;
  }
  </pre>
  
  <p>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?</p>
  
  <p>image -> <a href="http://i29.tinypic.com/hx3uy8.jpg" rel="nofollow noreferrer">http://i29.tinypic.com/hx3uy8.jpg</a></p>