jQuery vs CSS - and the winner is!

For some time now I have utilised jQuery in my web-based projects; I've built all sorts of web sites, applications and plug-ins with the fantastically powerful features offered by the JavaScript library. Whilst developing this web site, in regards to jQuery vs CSS a few things became quite clear. The main thing is the clear benefits of combining jQuery & CSS together, what you can achieve by doing this has pretty much no limits... they are incredibly powerful, whilst complimenting each other perfectly!

Standards-wise you can achieve about 80% or more of what you most likely will need via CSS 2.0, anything else that is not easily done with CSS 2.0 'Out of the Box' can be done with the aid of jQuery, hooray!

Let's take a look at fairly typical scenario that illustrates the power of jQuery:

Problem
There are 2 columns on your web site that need to be the same height and you know that the left column is always going to be the longer of the 2.

CSS Solution
Is there an easy way of making these two columns the same size in CSS, regardless of how much content goes into the left-hand column, extending it's length to an unknown value; the easy answer is no!

jQuery Solution
With jQuery this problem scenario can be fixed with a few simple lines of code (2 lines used for read-ability).

//Set right content column height (to left)
var iContLeftHeight = $('#content-bar-col-left').height();
$('#content-bar-col-right').height(iContLeftHeight);

So, there you have it... not very difficult at all was it?

Check back soon for more interesting tips and techniques from the MGBS development team.