Equal height sidebars
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.
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.
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.
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
Exercise: Equal heights
You know how make a layout’s regions have the same height. Run the
equalHeights plugin when the page loads.