In some design we have to use common height for same DIV. Some way we can use min-height using through CSS but it might not work when one of the div content will grow. So I search through Google and find some Jquery script.

Step 1 :- We have to first write this function :

function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}

Step 2 :- We have to call this function in the document Ready -

$(document).ready(function() {
equalHeight($(“.sample”));
equalHeight($(“.sample2″));
});

But I face some difficulties using like this. In safari browser script is not working properly. Also if we have a multiple div’s we have to call the div id or class one by one. So I modified the script a little bit and its working fine on all browsers. So for doing that we have to give the script like this.

$(window).load(function(){
var classArr = [".sample", ".sample1", ".sample2",".sample3"];

for(var i=0;i<classArr.length;i++)

{
equalHeight($(classArr[i]));
}
});

In this way we can use multiple equal height div in a array. Also perfectly working on all Browsers

Please not this will not work on IE6.

Well when we design the template for looking good will make the ComboBox as our own style. But problem comes when we do it on HTML. We can’t give proper style to ComboBox. If you are not look into IE6. This is the best way to style a ComboBox using JQuery.

Demo Here

Download Here