Where are we?

You know how to make fixed and liquid layouts. But there’s a problem we have to deal with.

This lesson’s goals

By the end of this lesson, you should know how make a layout’s regions have the same height.

The problem

Here’s a page using a liquid layout:

Figure 1. Unequal sidebar heights

You can try it yourself. You’ll have to shrink the browser to make it look like Figure 1.

It looks OK, but the heights of the central area and the sidebars are unequal. It would be better if it looked like this:

Figure 2. Equal sidebar heights

You can try this one.

A solution

There is no simple way to make the heights equal in CSS.

But some jQuery code can do it. Rob Glazebrook figured it out, and made a plugin for it. I put the plugin at http://coredogs.com/resources/jquery.equalheights.js.

I changed the code a tiny bit to make it work better.

Run the plugin when the page loads. Tell it what regions you want to be equal height, and it will take care of the problem for you.

Here’s the code.

...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://coredogs.com/resources/jquery.equalheights.js"></script>
<script type="text/javascript" language="javascript">
  $(document).ready(function() {
    $("#center_region, #left_region, #right_region").equalHeights();
  });
</script>
...
<div id="left_region">
...
</div>
<div id="right_region">
...
</div>
<div id="center_region">
...
</div>

Figure 3. Making the heights equal

Line 3 loads the plugin. It needs jQuery to run, so you need to load jQuery first (line 2). Line 6 runs when the page loads. Make a list of the regions you want to be equal, and then call equalHeights.

Summary

You know how make a layout’s regions have the same height. Run the equalHeights plugin when the page loads.