Create Equal Height Columns using jQuery

Create the Div columns are equal height using following code
div-equal-height
Place below code in between the head tag:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function setEqualHeight(columns)
 {
 var tallestcolumn = 0;
 columns.each(
 function()
 {
 currentHeight = $(this).height();
 if(currentHeight > tallestcolumn)
 {
 tallestcolumn  = currentHeight;
 }
 }
 );
 columns.height(tallestcolumn);
 }
$(document).ready(function() {
 setEqualHeight($(".container > div"));
});
</script>
<style type="text/css">
.container {
	Width: 900px;
	Margin-left: auto;
	Margin-right: auto;
}
.leftsidebar {
	Float: left;
	Width: 33%;
	background:red;
}
.content {
	Float: left;
	Width: 33%;
	background:blue;
}
.rightsidebar {
	Float: left;
	Width: 33%;
	background:green;
}
</style>

Place below code in between the bodytag:

 
<div class="container">
  <div  class="leftsidebar"> 
    … Lots Of Content … <br />
    … Lots Of Content … <br />
    … Lots Of Content … <br />
    … Lots Of Content … <br />
  </div>
  <div class="content"> 
    … Lots Of Content … <br />
    … Lots Of Content … <br />
  </div>
  <div  class="rightsidebar"> 
    … Lots Of Content … <br />
    … Lots Of Content … <br />
    … Lots Of Content … <br />
    … Lots Of Content … <br />
  </div>
</div>

Author: Raghava

Share This Post On

Submit a Comment

Your email address will not be published. Required fields are marked *


*

'