Posted By

stancox on 10/22/09


Tagged

height column


Versions (?)

Who likes this?

5 people have marked this snippet as a favorite

karp13
jannisg
shabbar
nightshiftc
LeGaS


Equal Height Columns with jQuery


 / Published in: jQuery
 

URL: http://www.cssnewbie.com/equal-height-columns-with-jquery/

  1. <!-- HTML -->
  2. <div class="column" id="col1">
  3. <p>This three-column design features three columns with significantly varying quantities of content.</p>
  4. </div>
  5. <div class="column" id="col2">
  6. <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>
  7.  
  8. <p>They're simply divs sharing a common class, all of which have been set to the same height.</p>
  9. </div>
  10. <div class="column" id="col3">
  11. <p>And I think a single class is an addition we can all get behind.</p>
  12. </div>
  13.  
  14. //Javascript
  15. <script>
  16. function equalHeight(group) {
  17. tallest = 0;
  18. group.each(function() {
  19. thisHeight = $(this).height();
  20. if(thisHeight > tallest) {
  21. tallest = thisHeight;
  22. }
  23. });
  24. group.height(tallest);
  25. }
  26. $(document).ready(function() {
  27. equalHeight($(".column"));
  28. });
  29. </script>

Report this snippet  

You need to login to post a comment.