My day job is currently as a front-end developer, and a design requirement recently perplexed me for quite sometime before finding an almost embarrassingly simple solution that worked across all the browsers we’re targeting.

Here’s the scenario: There’s a narrow div on the left with menu-like listings and a main div in the center. The left div has a drop-shadow on its right edge, which we’re using a tiled, 1px high png to accomplish.

The challenge is that on some iterations of the page, the left div is taller than the right and on some it’s the other way around. As coded by default, if the right div ended up taller than the left, the drop-shadow would end where the left div naturally ended, leaving a gap at the bottom.

Now, there is a pure-CSS solution to this, but after messing with it for a couple of hours and not quite getting the delicate dance of percentages and lefts, rights and hard pixel widths to play nice, I happened upon a jQuery solution that took about 40 characters of code to implement.

 $(document).ready(function(){
$(“#side”).height( $(“#main”).height() );
});

Replace the ID names of side and main  to match your own div IDs or classes. Instant success. I swear, I’m developing a very big crush on jQuery as I ferret out more things it can do to make my life easier that weren’t obvious to me up to now.