On Thu, Dec 22, 2011 at 5:03 AM, Al Sparber <aspar...@roadrunner.com> wrote: > > Equal Height CSS Columns > > Learn how to make your CSS columns automatically adjust to the height of the > tallest column in just a few minutes. This free productivity booster > includes a tutorial, and a bonus 3-column CSS layout all decked out for the > holidays with rounded corners and inset shadows!
display: table-cell box-shadow: inset ... border-radius: ... > Instead of using background images, CSS hacks, or CSS that is not yet > supported by all browsers, PVII Equal Height Columns uses modern DOM Script > to work its magic. A.K.A. JavaScript? Doesn't that make this not the CSS solution that the title implies? I checked the demo page with JavaScript disabled. It doesn't work. Accessibility... Portability... Security... anyone? > Go to Tutorial: > > http://www.projectseven.com/tutorials/css/pvii_columns/index.htm > > Key Features > > Supports dynamic content height > > If the height of any column ever changes, PVII Equal Height Columns will > make all necessary adjustments—instantly. The script monitors your page > every few milliseconds to see if the height of any column needs adjustment. > Your column height will always be perfect. If your page includes a panel > widget (like an accordion) that causes column height to change when you move > from panel to panel, the system will adapt to the new height seamlessly. Every few milliseconds seems inefficient. I looked at the code. It's every 20 milliseconds. Using the same markup from the demo page for this tutorial, but dumping all of the CSS and Javascript, this is much better accomplished like this... #layout-wrapper { display: table; border-collapse: separate; border-spacing: 10px; } #columns-wrapper { display: table-row; } .p7ehc-a { background-color: white; display: table-cell; border: 1px solid black; } Javascript is only necessary to support IE7 and older. > Best Regards, > > -- > Al Sparber - PVII > http://www.projectseven.com > The Finest Dreamweaver Menus | Galleries | Widgets > Since 1998 I wish I could take credit for it, but this particular solution was provided by 456 Berea Street back in May 2004 ... http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/ PVII, it's time to update your site rather than promoting it by posting outdated JavaScript-dependant solutions on a CSS mailing list. -- Ebenezer Scrooge a.k.a. Ghodmode http://www.ghodmode.com/blog ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
