Make column scrollable if it’s higher than other column

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

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

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.

Array has an extra undefined element in IE 8

I’ve run into this problem when I was writing a new piece of JavaScript code that went through an array and did something on all it’s elements. We needed to support the latest FF, Chrome and IE 8+. In almost all browsers it was working fine. However, in IE 8 my array had an extra undefined element at the end. My array definition looked something like this:

var arr = [1, 2, 3,]

The problem is the trailing comma at the end. IE 8 thinks that the comma means there is an extra element in the array and because it is not specified it becomes undefined.  Then if you go through all the element and try to call some function on them, you will get an error stating that the desired function is not available on that element. To fix this, just remove the trailing comma.

var arr = [1, 2, 3]