This tutorial explains how to create a two-column layout, where one of the columns become scrollable if it’s height would exceed the other column’s height.
There are two possible variations of this. Either the left or the right column is scrollable. These require slightly different solutions on the CSS side, so I will explain each of them separately.
The idea behind our solution
Basically we are just taking advantage of the properties of the absolute
and relative
positioning.
We will use two elements inside a container. One of the elements will use the default static
positioning and is able to push the height of the container out depending on it’s content.
The other element will have absolute
positioning so it is taken out of the normal flow, and unable to alter the height of it’s parent. What we will do with this absolute
positioned element is that we make sure it’s height
is 100% of the parent’s height
and force the content to scroll instead of overflowing.
So this way, our relative element will control the height of the container, and the other element will adapt to it’s height, and if it would exceed it, we make it scrollable by setting the overflow-y
property to auto
.
We used background color on our elements in the upcoming demonstration, but they are just there so the outcome is more visually apparent. Also, the widths of the elements can be changed, they don’t have to be 50-50%, as in the example.
Our HTML structure
The HTML structure we use will be the same in both cases, so this is the first thing I show you.
<div class="container">
<div class="left">...</div>
<div class="right">...</div>
</div>
We have a container and two columns that are div
elements in this case, but you can use other block level elements if you wish. The left and right columns should have some content depending on which of the two cases you would like to demonstrate. Use longer content in the div that you would like to make scrollable.
Making the left column scrollable
Here is the CSS that makes the left column scrollable.
.container {
position: relative;
}
.right {
width: 50%;
margin-left: 50%;
background-color: #E0E0B5;
}
.left {
width: 50%;
background-color: #B5D8E0;
position: absolute;
overflow-y: auto;
height: 100%;
}
Notice that we are using a 50% margin on the right element, so it is positioned in the proper place.
Making the right column scrollable
Here is the CSS that makes the right column scrollable.
.container {
position: relative;
}
.right {
height: 100%;
width: 50%;
position: absolute;
right: 0;
top: 0;
overflow-y: auto;
background-color: #E0E0B5;
}
.left {
width: 50%;
background-color: #B5D8E0;
}
You can see, that it’s really similar to the previous example, but we are using the right
and top
properties, to position the right side element the correct way.
Browser support
This solution has been tested and it works in the latest Chrome, Firefox, and in IE 8-11.