I have a div container with an image and some text inside. But for some reason a vertical blue scroll bar is showing, down the right side of the div container. Why does this happen? What's it for? How can I change it so it's not there? Thanks

Here is the html and css:

Code:
<div class="top2">
<img src="images/record.png" alt="text" />
<font size="4" color="#000000" face="Century Gothic">text text text</font><br />
<font size="4" color="#696969" face="Century Gothic">text text text</font><br />
</div>
Code:
 
.top2 {
float: right;
width: 690px;
height: 730px;
font-size:1em;
margin: 10px 15px 30px 0px;
padding: 20px;
border: 1px solid #cccccc;
overflow: auto;
}