Problem with Equal Height Blocks in Rows

[Mottie]

Hey @Fatbat!

Sorry the repo has actually moved over to the CSS-Tricks organization – [Equalizer](https://github.com/CSS-Tricks/Equalizer).

[Fatbat]

Hey @Mottie :) Thanks so very much for the direction and it’s nice to see it’s still being updated! Good stuff.

[Fatbat]

@Mottie, well that sure got a whole lot more complex since last I looked at it! The wrapper thing is different, but workable. There is one problem I’m having now though and that is with vertical centering. Using the css tables technique inside one of the equal columns…

.something-semantic {
display: table;
width: 100%;
}
.something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: middle;
}

I don’t think this works anymore because the content inside the equal column is getting wrapped in a span but I’m not completely sure :(

[Fatbat]

@Mottie, don’t know if you saw this post https://css-tricks.com/forums/discussion/comment/85487#Comment_85487 but I quite like the script that @jurotek and @joshuanhibbert came up with. I have a couple issues with it though. It doesn’t properly resize the columns at a breakpoint other than the one declared in the script and it can’t do multiple independent rows of different heights unless each row has its own class. However, other than those two things, it’s quite light and small, and seems to work quite well with getting the heights set accurately. “.equal” divs can be nested and I can also vertically center content in a row using the method above. What I would love is to figure out the most is how to get it to do multiple rows independent of one another without having to declare separate classes for each row. Any chance you might be able to have a look at it @Mottie?

[Author]

Posts