{"id":280,"date":"2008-12-07T15:28:33","date_gmt":"2008-12-07T20:28:33","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=280"},"modified":"2008-12-07T15:28:33","modified_gmt":"2008-12-07T20:28:33","slug":"equal-height-columns-with-jquery","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/equal-height-columns-with-jquery\/","title":{"rendered":"Equal Height Columns with jQuery"},"content":{"rendered":"

\"\"<\/a><\/p>\n

Update:<\/strong> This concept has been adapted into a full-fledged jQuery plugin. Check it out here.<\/a> And then read on to learn how this technique is done.<\/p>\n

Creating equal-height columns with CSS is sometimes a bear. But who needs the hassle of faux columns, \u201cclear\u201d divs and the rest? With this bit of jQuery, you can easily equalize the heights of any group of elements.<\/p>\n

This technique was born of frustration. I ran into two layout problems while working on the redesign of CSS Newbie<\/a> one afternoon, and both were directly related to the varying heights of elements.<\/p>\n

The first problem was in the footer. If you look closely, you\u2019ll see that there is a nice subtle two-tone border in between each of the columns in the footer.<\/p>\n

\"\"
\n<\/p>\n

That style wasn\u2019t as easy to create as it might look. At first, I was going to make the border part of the background image, and just edit my content to suit. But that\u2019s very un-web of me: the beauty of the web is we\u2019re not constrained by sizes nearly as much as print designers. <\/p>\n

So instead, I decided to make the borders the old-fashioned way, as legitimate CSS borders. Of course, to get it exactly the way I wanted I had to resort to a bit of a hack, matching light borders on the right side of one column with a dark border on the left side of the following column. The hack works beautifully… as long as all three of my columns are of equal height. Otherwise, the borders don\u2019t match:<\/p>\n

\"\"<\/p>\n

The second problem I ran into was in the \u201crecent articles\u201d section of the homepage.<\/a> I wanted to feature four articles, but I didn\u2019t want them to take up a ton of space. To accomplish that, I made the article blocks half as wide as my space and floated them into two columns with two rows. <\/p>\n

And as long as I\u2019m lucky and all my excerpts are the same length, that works fine. But the instant something is a line or two longer or shorter, one of the more annoying flaws with floats rears its ugly head. If I have a long excerpt in spot 1, followed by a short excerpt in spot 2, the excerpt in spot 3 won\u2019t float all the way to the left: it\u2019ll get caught on the edge of the first excerpt instead. <\/p>\n

\"\"<\/p>\n

So again, I have a height-related problem. \u201cIf only there was an easy way to equalize heights without resorting to a table,\u201d I thought thusly.<\/p>\n

And so I set out to find an easy way. And after a bit of fiddling with jQuery, I was able to find a workable solution. Here\u2019s the function I ended up with:<\/p>\n

function equalHeight(group) {\n\tvar tallest = 0;\n\tgroup.each(function() {\n\t\tvar thisHeight = $(this).height();\n\t\tif(thisHeight > tallest) {\n\t\t\ttallest = thisHeight;\n\t\t}\n\t});\n\tgroup.height(tallest);\n}<\/pre>\n
You can see it in action here.<\/a> What this function is doing is:<\/p>\n
    \n
  1. Sets a variable, \u201ctallest,\u201d to zero.<\/li>\n
  2. Loops through each of the items in the group we’ve defined.<\/li>\n
  3. If the current item is taller then the previous \u201ctallest\u201d item, it becomes the new tallest item.<\/li>\n
  4. Once we\u2019ve looked at all the items, they all get their height reset to be the same as the tallest of the group.<\/li>\n<\/ol>\n
    So in order to equalize the heights of both my footer columns and my recent articles, all I needed to do was something like this:<\/p>\n
    $(document).ready(function() {\n\tequalHeight($(\".recent-article\"));\n\tequalHeight($(\".footer-col\"));\n});<\/pre>\n
    Which just waits until all my elements are done loading (so that the heights can be computed accurately), then sets both the heights.<\/p>\n
    That\u2019s all there is to it!<\/a> This function is good for fixing wily floats without clears, creating nice equal-height column designs without needing faux columns, and probably half a dozen things I haven\u2019t thought of yet. I\u2019m sure you\u2019ll be able to find a use for the script someday… after all, I managed to find two uses in a single afternoon!<\/p>\n
    Share and Enjoy !<\/h3>
    0<\/span><\/span>Shares<\/small><\/div>
    <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
    Creating equal-height columns with CSS is sometimes a bear. But who needs the hassle of faux columns, \u201cclear\u201d divs and the rest? With this bit of jQuery, you can easily equalize the heights of any group of elements. […]<\/p>\n
    Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[165,184],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/280"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=280"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/280\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}