Posted by Nik Coughlin on 01/22/08 08:21

"Jeff" <jeff@spam_me_not.com> wrote in message
news:13pb8jpii1acu2c@corp.supernews.com...
> 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.

Looks OK:

http://browsershots.org/http://websiterepairguru.com/test_full_height_columns.html

I still like my solution:

http://www.nrkn.com/3ColEqualPositioned/

No Javascript, but as GTalbot pointed out last time I posted this, IE 7 has
some trouble selecting text in the leftmost column (probably trivial to fix)
and he objected to my using empty div elements for layout purposes and
clearing of floats, as well as my mixing floats and absolute/relative
positioning. However, of those only the IE 7 thing bothers me, and it is
otherwise very cross browser.

[Back to original message]