CODEWITHSUNDEEP
htmlcss
Sainath Mallidi
Sainath Mallidi

Reputation: 515

How to create two independent columns in a webpage?

I want to have two columns in webpage and each one with their own scrollbars instead of the common one that both uses. For example, what I'm thinking is along the lines of new twitter ui.. where one column shows the list with its scrollbar if the list is longer than the height and similarly the other column shows the details with its own scrollbar.

I am simply lost which way to proceed, do I need to use frames to achieve this. Can the global scrollbar be suppressed and each column use their own scrollbar with css?

Upvotes: 3

Views: 6128

Answers (2)

Dan
Dan

Reputation: 2341

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

Upvotes: 9

RichW
RichW

Reputation: 10912

Take a look at the CSS overflow property, it allows you to turn on scrollbars for a particular element, such as a div. Make sure you set a width and height on the element as well, otherwise it'll just expand to fit your content.

Upvotes: 2

Related Questions