Zen grids is very nice. Zen 7.x-5.1 is also very nice. Neither appears to deal with equal-height columns by themselves, requiring instead javascript or other hacks. I'd like to pursue one of the css-only solutions to the equal-heights problem instead. Specifically I'd prefer to get Matthew James Taylor's solution working since it works even in very complex liquid layouts.
On the one hand I don't mind figuring out how to do it myself. On the other hand I'd really, really rather not. Has anyone already cracked this? Or determined that it's intractable and that non-css hacks are required instead?
That said, assuming it's a solvable problem if I was going to do it does anyone have an opinion on whether the right starting place would be the Zen template files or Zen Grids? Or does one of the Zen Grids alternatives deal with it? I'd like to preserve the flexibility of the grids system rather than continuously tweak individual projects.
(Finally, yes, I know Omega solves this with a checkbox. But in all other regards Zen just seems a lot cleaner. Plus it's a lot more fluidly responsive.)
Comments
Ok. It looks like it's kind
Ok. It looks like it's kind of trivial to give give a particular Zen configuration Holy Grail columns. For instance for a single-sidebar layout you can do it with one additional wrapper div plus a bunch of CSS to, err, override a lot of Zen and Zen Grids goodness. In other words I can do it, and it does work even on very old browsers and without Javascript, but it's still a hack.
I'm still guessing someone who's more familiar with Zen, Zen Grids, and SASS mixins could build a general version and/or a uniform instruction set.
Joining
Hi, I also would like to know the drupal answer to this.
Some resources:
Matthew James Taylor:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-cs...
Chris Coyier:
http://css-tricks.com/fluid-width-equal-height-columns/
demo for Coyier's article:
http://css-tricks.com/examples/FluidEqualHeightFauxColumns/
Upon inspecting these resources I found that - with one exception - all these techniques are just different implementations of optical illusions.
The only solution that actually make tose columns really equally tall is applying
display:tableto the parent div anddisplay:table-cellto the columns. (which is needed in case your designer dreamed something for the bottom of an otherwise loosely inhabited sidebar (this is what I'd like to solve)).Now I'm afraid that display:table and display:table-cell on this primary level of the layout may not be compatible with the zen grid. In other words I might have to toss the goodness of Zen away completely if I want to go the above way.
But tossing away such a sophisticated tool feels unwise - instead, I would like to learn how I can use the Zen grids in this scenario.
Should this be added to the zen issue queue
This is a good question and discussion.
I wonder if it should be added to the zen issue queue.