As somebody who regularly converts design concepts to web I get asked a lot to make the heights of images and other content match. It makes sense from a design perspective with everything lining up perfectly, only problem is that there is no easy way to do it with CSS. For example this design
I usually use some sort of match height script like this:
[dt_code]
<script>
$(document).ready(function() {
var height = Math.max($(“#left”).height(), $(“#right”).height());
$(“#left”).height(height);
$(“#right”).height(height);
});
</script>
[/dt_code]
This usually works a charm, but problems can arise when the script runs before the images have loaded (which can happen fairly easily on longer pages).
The solution is simple: only run the script when the entire page has loaded by binding our script to the window load function:
[dt_code]
$(window).bind(“load”, function() {
//code goes here
});
[/dt_code]
