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

.example{
margin:0; /* This will work on all the browsers. FF3 */
_margin:0; /* This will work only on IE6 */
.margin:0; /* This will work only on IE7 */
}

Browser CSS Hacks

* IE 6 and below

* html {}

* IE 7 and Safari below

*:first-child+html {}

* IE 7 only

*:first-child+html {}

* IE 7 and modern browsers only

html>body {}

* Modern browsers only (not IE 7)

html>/**/body {}

* Recent Opera versions 9 and below

html:first-child {}

You can find the Sample Here

Demo Here

You can find Demo Here

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

Click this link to download the Example

http://blog.themeforest.net/general/15-css-tricks-that-must-be-learned/

The HTML Code

Below is the basic structure of the HTML code. You’ll notice how the footer <div> sits outside of the wrap <div>.

<div id="container">
	<div id="wrap" class="clearfix">
	</div>
</div>

<div id="footer">

</div>

You would place your content elements inside the main <div>. For example, if you were using a 2 column floating layout you might have this;

<div id="container">

	<div id="wrap" class="clearfix">

		<div id="content">

		</div>

		<div id="side">

		</div>

	</div>

</div>

<div id="footer">

</div>

A header could be placed inside the wrap but above the main like this;

<div id="container">

	<div id="header">

	</div>

	<div id="wrap" class="clearfix">

	</div>

</div>

<div id="footer">

</div>

If you wanted to place any elements outside of either the wrap or the footer then you would need to use absolute positioning else it messes up the 100% height calculations.

The CSS Code

Below is the CSS code makes your sticky footers to stick to the bottom.

html, body, #container {height: 100%;}

body > #container{height: auto; min-height: 100%;}

#wrap{padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;}

You’ll notice that the footer height is used three times here. This is important and should be the same value for all three instances. The height properties are stretching the wrap <div> to the full height of the window. The negative margin of the footer brings it up into the padding created for the main <div>. Since the main rests inside the wrap the padding height is already part of the 100%. Thus the footer rests at the bottom of the page.

But we are not done just yet. We need to add the clearfix properties to the main <div>.

Clearfix Hack to the Rescue

Many CSS designers will be familiar with the Clearfix Hack. It solves a lot of problems with floating elements. We use it here to get the footer to stick in Google Chrome. It also solves issues that come up when using a 2-column layout where you float your content to one side and your sidebar to the other. The floating content elements inside the main <div> can cause the footer to become un-stuck in some browsers.

So we add this to our stylesheet as well;

.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

If you prefer to use the Ryan Fait method with the extra push <div> you’ll still need to apply a clearfix if you are using a floating multi-column layout.

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

selector {
height: 100px ; /* Firefox */
_height:120px; /* IE6 */
.height:130px; /* IE7 */
}