Enhancing YUI grids with equal height columns
One of the biggest issues of CSS layouts is that not all columns are the same height which makes it hard to style them in a traditional manner. You can embrace this change as a designer, but that seldomly happens.
Having played with YUI grids lately I realized this shortcoming, too. Nested grids don’t have the same height. I am sure you can tweak the CSS to do that (Ed Eliot showed a lot of options how to achieve equal height columns in the past) but I don’t get much fun out of CSS hacking.
What I like is JavaScript and as equal column heights are not really a vital part of a web site functionality, I am happy to use it to fix these issues.
As the YUI grids come with a defined set of CSS classes I have my hooks to apply JS functionality to and the script was easy to do using YUI Dom and YUI Dom Region.
Check out the demo page for equal height nested grids and download the script to use it in your own grid solutions.
All you need to do is to add YAHOO, YAHOO Dom and YAHOO Event (easiest with the collated yahoo-dom-event package) and the script in the bottom of your document’s body. The script automatically equals all columns in nested grids. If you don’t want all of them to be equal, define only those that need fixing by adding a “columnfix”CSS class.
August 31st, 2007 at 8:23 pm
August 31st, 2007 at 1:40 am
August 31st, 2007 at 8:23 pm
August 31st, 2007 at 8:23 pm
August 30th, 2007 at 8:03 am
Nice solution! And it does not break the layout if no JS is activated… :)
August 30th, 2007 at 11:54 am
Another useful tool to have in the arsenal – good to have both a CSS and JS option I always think!
October 17th, 2007 at 11:07 pm
Great script, thank you. I was having trouble applying a 1px border to the div’s in addition to the background color. Have you noticed this? Is there a solution to research? Thanks in advance for your help.
-Jason
November 8th, 2007 at 3:15 am
Slick script. Works well for my yui-u containers. I think I have run into an issue, which isn’t a bug, but rather wasn’t a factor as far as I can tell. I am using a nav column yui-b and want that column height to match the main body column yui-b. I have tried applying columnfix to both or one of the divs but they wont both match height. It works for my yui-u elements very well.
November 22nd, 2007 at 7:28 pm
Blöcke mit YUI Grids mit gleicher Höhe…
Yahoo’s YUI Grids sind eine feine Möglichkeit, um damit CSS Layouts zu erstellen, die in allen gängigen Browsern problemlos funktionieren. Bei so viel Funktionalität bleibt die Optik manchmal ein wenig auf der Strecke – Blöcke automatisch auf die …
December 10th, 2007 at 7:53 pm
Great! Thanks for this file. It works like a charm!
Can you suggest a fix for if the font size is changed (increased) ?
December 11th, 2007 at 12:06 am
It just occurred to me, if you change line #23 in the .js srouce so that you are setting the height to: height/13 + ‘em’ .. this would make your fix work when text sizes are enlarged.
May 13th, 2008 at 2:30 am
Rather than extending the length of the shorter column, I change the background of the div behind the columns to match the background of the shorter column. It seems to me that would be more stable in the context of user zooms and the like…