HTML & CSS How to remove scroll bars

[RobertWA]

I have a page with five columns. Column 2 contains a list of clickable names. Column 4 contains the story for whichever name is clicked. Columns 1, 3 and 5 are empty and are there only to help format the page. (There is almost certainly a better way to do this, but that’s a question for another time.)

The whole page, and Column 4, both have vertical scroll-bars. When I have scrolled down to the bottom of Column 4 not all of the content in the story for that column is visible. To see the rest of it I have to scroll down the main page, then scroll down Column 4.

I would like to be able to have only one scroll-bar, I think preferably on the full page, which will let me scroll down to see the whole story in Column 4.

The relevant parts of my files are:

[CODE lang="css" title="Smith.css"]/* Columns col1, col3 and col5 are just for formatting the page. All content is in col2 and col4 */

.col1 {
width: 9%; background-color: wheat;
;
}
.col2 {
width: 21%; background-color:wheat;
}
.col3 {
width: 1%; background-color:wheat;
}
.col4 {
width: 50%; background-color:wheat; overflow:visible;
}

.col5 {
width: 19%; background-color: wheat;
;
}

[/CODE]
[CODE lang="html" title="Index.html"]<div class="row">

<div class="column col1" >
</div>

<div class="column col2" >
<iframe src="Smith Family menu.html" title="" width="100%" height="1000px" style="border:none" >
</iframe>
</div>

<div class="column col3" >
</div>

<div class="column col4" >
<iframe src="Smith Family History Introduction.html" name="myFrame" width="100%" height="1000px" style="border:none">
</iframe>
</div>

<div class="column col5"
</div>

</div>
[/CODE]

[CODE lang="html" title="Bill Smith.html"]<li><a href="Bill Smith.html" target="myFrame">Bill Smith</a></li>[/CODE]

Thank you for any assistance.

Robert