scroll with div tags

[springer408]

hi, so I am trying to create two columns next to each other that the user can scroll each one independent of the other column through <div> tags. I am able to get the scroll bars to come up, but they do not scroll down so the user cannot scroll up or down each column to see what is there. I will highlight my area of focus.

<style>
div.scroll {
width: 500px;
height: 300px;
border: 10px;
padding: 5px;overflow:hidden;
}


#header {
width: 99%;
padding: 5px;
background:purple;
color: yellow;
text-align: center;
}


#col-one {
float: left;
width: 49%;
text-align: center; overflow-y: scroll;
overflow-x: hidden; 
}


#col-two {
float: right;
width: 49%;
color: black;
background: red;
text-align: center;overflow-y: scroll;
overflow-x: hidden;
}


</style>



<div id="col-one">this is the first column with information</div>
<div id="col-two">this is the second column with information</div>