Equal Height Columns with JavaScript (Full Tutorial)
As an alternative to “faux columns” and other not-so-clean methods for attaining equal column height in CSS layouts, this tutorial will explain how to accomplish equal columns with pure, unobtrusive JavaScript. This method takes into account top and bottom border thickness as well as interior padding so that the two columns are exactly the same height in virtually every circumstance. And the script is written to ensure that the columns will equalize regardless of which one is taller, so it’s very practical for dynamic content with complex background styles.
Related Submissions:
- Equal Height Columns with jQuery Creating equal-height columns with CSS is sometimes a bear. But who needs the hassle of faux columns, “clear” divs and the rest? With this bit...
- Four Methods to Create Equal Height Columns Get educated in various techniques to create equal height columns that work on all major web browsers (including the infamous IE6). ...
- Simple CSS trick for Equal Height Columns This tutorial describes a really simple CSS trick to implement a fake equal height columns effect using the CSS properties position:absolute and border. ...
- Create Sidebars of Equal Height with Faux Columns CSS can sometimes be a tricky business. There are times when even the simplest of layouts take some serious brainstorming! One of those frustrating times...
- Line Height A simple, step-by-step presentation on CSS line-height. Covers leading, how to apply various line-height values, as well as line-height and the inline box model. ...