All geek questions in one place

How to create two independent columns on a web page?

I want to have two columns on a web page, and each of them has its own scrollbars, not the common ones that are used. For example, what I think corresponds to the lines of the new twitter ui .., where one column shows a list with its scroll bar if the list is longer than the height, and similarly another column shows details with its own scroll bar.

I just lost the way to continue, I need to use frames to achieve this. Is it possible to suppress the global scrollbar and each column uses its own scrollbar using css?

+3
source share
2 answers

HTML:

<html>
  <body>
    <div class='right'>
      <!-- data -->
    </div>
    <div class='left'>
      <!-- data -->
    </div>
  </body>
</html>

CSS

body{
  overflow:hidden; /* This will remove the default scroll, not really needed, safer nonetheless */
}
.right, .left{
  overflow:auto; /* This will add a scroll when required */
  width:50%;
  float:left;
  height: 100%
}
+9
source

CSS, , div. , , , .

+2

Source: https://habr.com/ru/post/1783837/

More articles:


All Articles