Re: Multiple Equal Height Columns Test

dorayme wrote:
In article <13pb8jpii1acu2c@xxxxxxxxxxxxxxxxxx>,
Jeff <jeff@xxxxxxxxxxxxxxx> wrote:

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


Don't forget simple tactics where they can be used:

http://netweaver.com.au/alt/equalColsSimpleTactic.html

(just adapted from yours but not adjusted for IE)


Well that's rather clever and I'll add it to my bag of tricks.

There are a few caveats, usually you don't know for sure which column is going to be tallest. Since we are all doing CMS, it's not completely predictable. And you can't do full height borders.

Jeff
.

Relevant Pages

  • Re: Multiple Equal Height Columns Test
    ... Jeff wrote: ... The CSS solutions with negative margins work well but presents ... This simply adds bottom padding as needed to make the columns equal. ...
    (alt.html)
  • Multiple Equal Height Columns Test
    ... I need a look at a sample layout. ... The CSS solutions with negative margins work well but presents problems with readability as well as maintainability. ... If you wish to try this in your own designs, any bottom padding must be specified in pixels to be preserved correctly. ...
    (alt.html)
  • Re: Multiple Equal Height Columns Test
    ... Jeff wrote: ... The CSS solutions with negative margins work well but presents ... Well that's rather clever and I'll add it to my bag of tricks. ... And you can't do full height borders. ...
    (alt.html)