Equal div column heights

Sometimes we need to do equals columns. I think most all of you do it  with javascript,  but that’s a whole lot of code.The same result can be achieved with just a few lines of css. Here is a demonstration on Bootply:
http://www.bootply.com/QOfKYIVeGF


I wrapped columns in a row and gave it an additional class name which I could then use for targeting. I choose equalheights, but call it whatever you like. Then I simply added the following css. This example fits for bootstrap, but you can change it on  your own way:

.row.equalheights {
  overflow: hidden;
}
.row.equalheights > [class*="col-"]{
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

I’m not a purist who thinks that javascript should never be used for controlling the layout, but in this case it’s wholly unnecessary and introduces a bunch of problems that add to the bloat, such as having to recalculate on resize, etc. Furthermore, when your design collapses on sm and xs viewports, you’ll have giant empty divs. With the css solution, it behaves exactly as you would expect and want it to by simply collapsing to the size of each column’s content.

Leave a Reply

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