css : Scrolling issue

Question

I have 3 seperate portion in page. Each should scroll individually. And if we scroll entire page every div should scroll.

How to achieve that. Following is fiddle for that http://jsfiddle.net/qLonzsvj/

html{
 overflow-x:hidden;
}
.left-column
 {
    float:left;
    width:30%;

 }
 .right-column
  {
    float:right;
    width:30%;

  }
  .center-column
  {
    margin:auto;
    width:30%;

  }

possible duplicate of [Scroll particular DIV contents with browser's main scrollbar](http://stackoverflow.com/questions/6887112/scroll-particular-div-contents-with-browsers-main-scrollbar) — ZEE, Feb 23 '15 at 06:03

Enjayy · Answer 1 · 2015-02-23T06:34:55.640

A few things need to be changed to allow this to work I made a little mock up on jsfiddle you need to give the boxs a defined height and an overflow property of scroll. Also you do not need to float your boxes all willy nilly to make this happen.

:::EDIT::: Updated Js Fiddle for page scrolling http://jsfiddle.net/kriscoulson/qLonzsvj/2/

*{
    box-sizing: border-box;
}
.cols {
    float:left;
    width:33%;
    overflow: scroll;
    height:30px;
}

.left-column{
    background: red;
    
}
.center-column{
    background: blue;
}
.right-column{
    background: green;
}

<div id="container">
<div class="cols left-column">
    <div>div1</div>
    <div>div1</div>
    <div>div1</div>
</div>
<div class="cols center-column">
    <div>div2</div>
    <div>div2</div>
    <div>div2</div>
</div>
<div class="cols right-column">
    <div>div3</div>
    <div>div3</div>
    <div>div3</div>
 </div>

The page wont scroll because there is no content to scroll you can add a fixed pixel height or a min height of like 2000px and it will scroll http://jsfiddle.net/kriscoulson/qLonzsvj/2/ — Enjayy, Feb 23 '15 at 06:32

score 1 · Accepted Answer · answered Feb 23 '15 at 06:53

I think this is what you are looking for.

CSS

html, body {
height: 100%;
position:relative;
}

body
{
background:#00253f;
line-height:100px;
text-align:center;
}

.left
{
position:absolute;
margin-left:5%;
margin-top:3%;
display:block;
height:80%;
width:20%;
background:#ddd;
overflow:scroll;
}

.center
{
position:absolute;
margin-left:25%;
margin-top:3%;
display:block;
height:80%;
width:50%;
background:#ccc;
overflow:scroll;
}

.right
{
position:absolute;
margin-left:75%;
margin-top:3%;
display:block;
height:80%;
width:20%;
background:#ddd;
overflow:scroll;
}

HTML

<div class="left"> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br></div>
<div class="center"> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br></div>
<div class="right"> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br></div>

Check demo here jsfiddle

if we come to end of one scrolling area body starts scrolling. How can i prevent that? — Priya, Feb 23 '15 at 11:58
Well for that you need JavaScript. [Updated Demo](http://jsfiddle.net/divy3993/78h8e88x/4/) — divy3993, Feb 23 '15 at 15:44

css : Scrolling issue

2 Answers2