|
|
Posted by Jeff on 01/22/08 23:14
dorayme wrote:
> In article <13pb8jpii1acu2c@corp.supernews.com>,
> Jeff <jeff@spam_me_not.com> 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
Navigation:
[Reply to this message]
|