Div container shows an unwanted blue scroll bar

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:

<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 />

.top2 {
float: right;
width: 690px;
height: 730px;
margin: 10px 15px 30px 0px;
padding: 20px;
border: 1px solid #cccccc;
overflow: auto;

The scrollbar is an effect of the overflow:auto . Read here: http://reference.sitepoint.com/css/overflow