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
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
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.
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.
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.
You can see, that it’s really similar to the previous example, but we are using the
top properties, to position the right side element the correct way.
This solution has been tested and it works in the latest Chrome, Firefox, and in IE 8-11.