Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • 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 Trouble with scrollbars, again

RobertWA

Active Coder
I am still having trouble with scrollbars.

My page has two columns with iframes. The file in the left column is short i.e. it doesn’t extend beyond the bottom of the screen, so a vertical scrollbar is not required. The file in the second column is longer and extends beyond the bottom of the page, so a vertical scrollbar is required.

My problem is that I have two scrollbars, one on the second column and one on the full screen, and I have to use both scrollbars to see the whole document.

I have tried using the various values for overflow, and I have tried various values for the height of the columns. All were unsuccessful.

How can I get rid of the scroll bar on my second column, and just use the main screen scrollbar to see my document?

[In fact, as I was preparing this thread I noticed that I was having the same problem. There is a scrollbar on my draft thread, but it won't let me see my entire thread without using the main screen scrollbar as well. However in Preview mode there is only one scrollbar - the main screen one - and it lets me see my entire thread. That is what I want to achieve!]

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

<iframe src="Smith menu.html" title="" width="100%" style="border:none" style="overflow:visible" >
</iframe>

</div>

<div class="column col4" >

<iframe src="Smith Introduction.html" name="myFrame" width="100%" style="border:none" style="overflow:visible" ></iframe>

</div>
</div>
[/CODE]

[CODE lang="css" title="Main.css"].column {
float: left;
padding: 10px;

}

.col2 {
width: 30%; background-color:wheat; padding-left:50px; padding-right:100px; height:1000px; overflow:visible;
}

.col4 {
width: 70%; background-color:wheat; height:1000px; overflow:visible; padding-left:20px; padding-right:0px;
}
[/CODE]

Thanks,

Robert
 

Buy us a coffee!

Back
Top Bottom