How can I divide my page in 2 scrollable vertical pages?

Question

How can I make my page split into 2 separate "columns" both of them being scrollable?

<table width=100% height=100%>
   <tr>
       <td width=50%><a style='margin-top:130%'></a>
      </td>
       <td width=50%>Put page2 here
      </td>
   </tr>
 </table>

score 0 · Answer 1 · edited May 23 '17 at 12:22

Instead of using tables for layout purposes, please use CSS. It is really not a good idea to use tables for layout purposes. Here's an easy version for you.

.left, .right {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
  background: #ccf;
  overflow: auto;
}
.right {
  left: 50%;
  right: 0;
  background: #cfc;
}

<div class="left">
  Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.<br />
  However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.<br />
  Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.<br />
  However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.<br />
  Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.<br />
  However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.<br />
  Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.<br />
  However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.<br />
</div>
<div class="right">
  Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.<br />
  However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.<br />
  Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.<br />
  However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.<br />
  Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.<br />
  However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.<br />
  Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.<br />
  However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.<br />
</div>

Midas · Answer 2 · 2016-06-06T15:37:27.023

0

You can do this using float or absolute positioning. Below is a solution using floating.

I added overflow:scroll to demonstrate the scrollbars.

html, body, div {
    height: 100%;
    margin: 0;
}
div {
    width: 50%;
    float: left;
    overflow: scroll;
}

<div></div>
<div></div>

edited Jun 06 '16 at 15:37

answered Jun 06 '16 at 15:35

Midas

7,012
5
34
52

Why are you putting some code and without writing anything. Won't you give a description? Having such a reputation, what you have done is really bad. – Praveen Kumar Purushothaman Jun 06 '16 at 15:35
@PraveenKumar Sorry, I assumed the code snippet would speak for itself – Midas Jun 06 '16 at 15:41
I agree with you, but still... :) – Praveen Kumar Purushothaman Jun 06 '16 at 15:43

How can I divide my page in 2 scrollable vertical pages?

2 Answers2