Advanced Search

Return to Snippet

Revision: 62733
at March 8, 2013 03:40 by thesmu
Updated Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Newbie Example: Equal Height Columns with jQuery</title>
<style>
   body {
      font: small/1.3em Arial, Helvetica, sans-serif;
      background-color: white; }
   #wrap {
      width: 600px;
      margin: 0 auto; }
   .column {
      float: left; 
      padding: 10px; }
   #col1 {
      width: 110px;
      margin-right: 10px;
      background-color: #E2DDC4; }
   #col2 {
      width: 200px;
      margin-right: 10px;
      background-color: #6B99F6; }
   #col3 {
      width: 210px;
      background-color: #E87C5E; }
</style>
<script language="javascript" type="text/javascript" src="../../js/jquery/jquery.js"></script>
<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>
</head>

<body>
<div id="wrap">
   <h1>Equal Height Columns with jQuery</h1>
   <p>This is an example of equal height columns using a single short jQuery function. View the page source or <a href="http://www.cssnewbie.com/equal-height-columns-with-jquery/">refer to the original CSS Newbie article</a> to see how the function works.</p>
   <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>
</div>

</body>
</html>

Revision: 62732
at March 8, 2013 03:33 by thesmu
Initial Code 
Columns with equal heights have always been a problem for designers using divs, although now, there are quite a few solutions. Among the solutions available to you is using jQuery. This technique only requires a very small JavaScript function to handle everything, then some basic integration with the main layout to make the magic happen.

The function and snippets for this approach is from CSSNewbie. If anyone would like more insight to how the function works, it’s all there.

To solve this problem with jQuery, just add this function to your pages you wish to have equal heights (or include it as a JavaScript file – which is better for maintainability).

function equalHeight(group) {
  tallest = 0;
  group.each(function() {
    thisHeight = $(this).height();
    if(thisHeight > tallest) {
      tallest = thisHeight;
    }
  });
  group.height(tallest);
}
To get equal-height columns, link to the script that contains the function, and put the following code block below in the <head> tags of your pages.

<script type="text/javascript">
$(document).ready(function(){
  equalHeight($(".col1"));
  equalHeight($(".col2"));
  equalHeight($(".col3"));
});
</script>
The code will execute as soon as the DOM is ready to be utilized, ($(document).ready(function()) and then uses the equalHeight function to accurately calculate the height of all the columns. As one can see, all a designer needs to do is use divs with classes of col1, col2, and col3 to make this example work properly.
Initial URL 
http://www.cssnewbie.com/example/equal-heights/
Initial Description 
equal-height columns
Initial Title 
equal-height columns with jquery
Initial Tags 
jquery
Initial Language 
jQuery