Advanced Search

Return to Snippet

Revision: 19361
at October 22, 2009 08:28 by stancox
Initial Code 
<!-- HTML -->
<div class="column" id="col1">
		<p>This three-column design features three columns with significantly varying quantities of content.</p>
</div>
<div class="column" id="col2">
		<p>However, despite the differing quantity amounts, these columns are exactly the same height. No tricks, no gimmicks, no resorting to repeating background images to fake our way to columnar nirvana. And certainly, no tables have been harmed in the making of these columns. </p>

		<p>They're simply divs sharing a common class, all of which have been set to the same height.</p>
</div>
<div class="column" id="col3">
		<p>And I think a single class is an addition we can all get behind.</p>
</div>

//Javascript
<script>
function equalHeight(group) {
	tallest = 0;
	group.each(function() {
		thisHeight = $(this).height();
		if(thisHeight > tallest) {
			tallest = thisHeight;
		}
	});
	group.height(tallest);
}
$(document).ready(function() {
	equalHeight($(".column"));
});
</script>
Initial URL 
http://www.cssnewbie.com/equal-height-columns-with-jquery/
Initial Description 

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Equal Height Columns with jQuery

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
jQuery