CSS - How to remove 2nd vertical scroll bar without changing anything else?

Question

I am trying to get rid of a distinctly unwanted second vertical scrollbar that has appeared on this page I am putting together, see http://abchealth.info/doc-mike-special/test3/.

My research here led me to try and remove the 'overflow' from my CSS, but this absolutely trashed my layout, so I am looking for a solution that removes the inner vertical scrollbar without changing anything else...

I'd much appreciate your help, thanks!

Here's my CSS:

/* Generated by KompoZer */


body {
background-image: url(http://abchealth.info/images/bg.png);
}


html, body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;

}


div#wrap {min-height: 100%;}

div#mastercontainer {
overflow:auto;  width: 100%;
height: 100%;
min-height: 100%;
}

div#header {
background-image: url(http://abchealth.info/images/header-bg.jpg);  background-repeat:   
repeat-x;
position: top; height: 96px;}


div#content {
}


div#innercontentmiddle {
margin: 0 auto;
width: 540px;
padding:10px;    padding-bottom:510px;}


div#footerclear {
}



div#footer {
position:relative;  margin-top: -510px; height: 510px; clear:both;
background-image: url(http://abchealth.info/images/footer-bg.jpg);  background-repeat:   
repeat-x;}


/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}

Answer 1

change this: #mastercontainer {overflow:auto;} to #mastercontainer {overflow: visible;}

What's happening is 'auto' uses a scroll bar if the content is too big for the frame. Aka that div or w/e needs enlarged to avoid the scroll. Visible will let it overflow like I think you want. Either visible or even hidden would work with this code-- css is all about playing around and experimenting.

***Most browsers offer a plug-in called 'FireBug' -> download it. It allows you to edit the css etc of webpages while viewing. Very useful for css styling errors. Highly recommended for issues such as this.

Answer 2

This works

#mastercontainer { overflow: hidden; }

or the above solution works too.

Answer 3

Remove overflow:auto from div#mastercontainer.