Thursday, November 11, 2010

Even floated div columns: equalHeights

When you are floating a bunch of divs inside a container, it is a design problem when the divs are of different heights depending on their content, because they tend to wrap funky. One can, by brute force, make them all the same height, but that approach is fragile and can create problems with the content contained in each div. (Why is there a flower photo? Just because it looks nice.)

A better approach would be to measure the tallest div and force that height on all the remaining divs. Alas, although there exist some CSS methods for doing this, they're not adequately cross-browser compatible, so a javascript method is the only effective approach.

I found a very nice jquery plugin called equalHeights, and implemented it in the SimpleFolio theme for rabbitsoftware. Thank you again, Filament Group, a great resource for JQuery plugins.


I just could not get the pxToEm part working, so I commented it out of the script. Fortunately, the SimpleFolio theme is written mainly in pixels and so does not need the pixels-to-ems function — in general, ems are a preferred unit of measurement, as they are more adaptible.
  1. upload equalHeights.js script to the theme js folder
  2. edit header.php to link to the script, before loading custom.js
  3. edit header.php: add $('.home_widgets').equalHeights(true); after the slider timeout function.
  4. By the way, if you want your slider to go more slowly, this is the place to edit that number; the 5000 default is about 5 seconds per slide.
This blog post is reposted from my technical/professional blog, dbwebwork.
Photo credit: Creative Commons: UpstateNYer. Source: Yellow Evening Primrose, World News

No comments:

Post a Comment