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

Actaully if you can see there is no shadow is showing in Thickbox library. So I just manipulate the code and give some shadow on the thickbox JS. Only problem its is not perfectly working on IE6. Which I am still looking on it……

You can find the Sample Here

Demo Here

Whenever we are creating a form or table layout design we have to use table. So I tried something on UL LI and its working for me. Checkout the screenshot.

You can find Demo Here

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

There are many footer stick methods to be found in Google. I’ve tried many of them and they usually fail in some regards. The Problem it seem that the old code may not properly work on new browsers. I tryed a way that it will work in my works. Check the Code below.

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.

For Min-Height working in IE6 this was the easiest way of doing it. In browser like IE6 won’t take min-height with this simple hack you can give the min-height to IE6.

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

Transparency is somthing which will work differently in all browsers. For working with the transparency we have to create a four statements. See the example its set to 50%.

.selector {
filter:alpha(opacity=50); /* IE6 */
-moz-opacity:0.5; /* FF2, FF3 */
-khtml-opacity: 0.5; /* Safari */
opacity: 0.5; /* FF2, FF3, Safari */
}