• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS How to remove scroll bars

RobertWA

New Coder
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:

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;
;
}
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>

Bill Smith.html:
<li><a href="Bill Smith.html" target="myFrame">Bill Smith</a></li>

Thank you for any assistance.

Robert
 

Top