Need a scrollable box on a specific location

I've been struggeling with this for a few days and decided to ask for some help.

I want a scrollable box on a specific location on my site with a image in it.

Here is my base code:

<html>
<head>
<meta charset="utf-8"/>
<link rel="favicon" type="image/ico" href="favicon.ico"/>
<title>Rolling Barrel :: Sport & Game</title>
<style>
div {
	width: 100%;
}

img[usemap] {
		border: none; height: auto; max-width: 100%; width: auto;
}

#background {
	position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;
}
</style>
</head>
<body>
<div>
<img src="background.jpg" id="background" width="1920" height="936" usemap="#imagemap"/>
<map name="imagemap">
<area shape="rect" coords="212,103,322,150" href="/home"/>
<area shape="rect" coords="335,103,456,150" href="/nieuws"/>
<area shape="rect" coords="468,103,677,150" href="/kinderfeestjes"/>
<area shape="rect" coords="690,103,918,150" href="/beeldmateriaal"/>
<area shape="rect" coords="930,103,1057,150" href="/contact"/>
<area shape="rect" coords="1070,103,1201,150" href="/verhuur"/>
<area shape="rect" coords="1212,103,1354,150" href="/zakelijk"/>
<area shape="rect" coords="1364,103,1732,150" href="/rolling-barrel-centers"/>
</map>
</div>
<script src="../jquery/1.js"></script>
<script src="../jquery/2.js"></script>
<script>
$(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
});
</script>
</body>
</html>

I know it may look very stupid but i'm not a webdesigner and did this with very little knowledge!

The "scrollable box" has to be an overlay over the current "news" box but only with a scrollable box so i can photoshop my news vertical as long as i want.

Anyone got a sample code or advice on how to do this?

Solution

<!DOCTYPE html>
<html>

<head>
  <style>
    div.scroll {
      background-color: #00FFFF;
      width: 100px;
      height: 100px;
      overflow: scroll;
    }
    
    div.hidden {
      background-color: #00FF00;
      width: 100px;
      height: 100px;
      overflow: hidden;
    }
  </style>
</head>

<body>

  <p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p>

  <p>overflow:scroll</p>
  <div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>

  <p>overflow:hidden</p>
  <div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>

</body>

</html>