Posted by Jeff on 01/22/08 07:59

I need a look at a sample layout.

I've looked around at the different ways of writing equal height
columns. The CSS solutions with negative margins work well but presents
problems with readability as well as maintainability. It also doesn't
suit some needs.

So I looked at some javascript solutions, since these degrade nicely
if no script (the columns simply aren't equal height). I notice some
problems with most of these with changing text size, particularly in Moz
flavors and some padding issues.

So I wrote my own:

<URL: http://websiterepairguru.com/test_full_height_columns.html>

This simply adds bottom padding as needed to make the columns equal.
Columns with a class with equal as part of their class name are
equalized. No limit to number, or for that matter where they are.

I need a look in different browsers and OS's.

All comments and some insults accepted.

I'll clean up the code if it looks workable. I'm not correcting for
IE5, for example. And the initiation would change.

If you wish to try this in your own designs, any bottom padding must
be specified in pixels (in the CSS) to be preserved correctly.

Jeff

[Back to original message]