Calculating auto heights with CSS and jQuery

Columns If you build a column based template using old-style HTML tables, you will find that the left and right columns will always be the same height, regardless of the content.

Doing the same with CSS is not as straight forward because the height of each column would either be set to "auto" (which can lead to unequal heights) or would be set to a specific height value (which is very restrictive).

Ideally you want a solution where no matter what the height of column A is, column B is always the same. Using jQuery and the HD-Anycode module, you can do just this.

Here is the CSS and HTML for two example columns...

<style>
#column-a {background-color: silver; width: 200px; float:left;}
#column-b {background-color: pink; width: 200px; float:left;}
</style>

<div id="column-a">text<br/>text<br/>text</div>
<div id="column-b">text</div>

Column A will be larger than column B because it contains two extra lines of content.

Here is the javascript code that matches the two heights.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function showHeight(ele, h) {$("#column-a").css({height: h });}
$("#column-b").ready(function () {showHeight("div", $("#column-b").height());});
</script>

The First line loads jQuery.

The Third line grabs the current height from the div with the ID #column-a.

The Fourth line applies that height to the div with the ID #column-b.

A similar function can be prepared to match widths (by substituting showHeight with showWidth ).

HD-Anycode