Boxes of equal height

[jurotek]

I got finally all my boxes equal height by using jQuery 1.8.3 and this little snipet:

$(document).ready(function() {
setHeight(‘.box’);
});

var maxHeight = 0;
function setHeight(column) {
column = $(column);
column.each(function() {
if($(this).height() > maxHeight) {
maxHeight = $(this).height();;
}
});
column.height(maxHeight);
}

With media query below I am using class full and stretching all the boxes full width of the view port like this

@media only screen
and (max-width : 640px) {
html {font-size:93.8%;}
.full {width:95%;margin:0 0 22px 2.5%;}
}

How do I alter that script when I go to 640px width and below not make the boxes equal height anymore? Thanks.

[Fatbat]

It works great on the initial load, say for a 960px grid on a big browser. However, I have a break point at 959px where everything gets narrower, and then again at 767px where all the columns stack on top of one another. The script needs to refresh at each breakpoint and readjust the column heights as they get narrower, but I’m not sure how to do that.

[Fatbat]

OK, I was having issues with float clearing, it’s working better for me now. How can we apply this to two different rows of columns on the same page though? I have a row of content with two columns in it like Jurotek’s last example, but I also have a row in my footer that is four columns that are picking up the same height as the content row above. But each row should be independent from each other able to set a unique height. Any ideas?

[Fatbat]

@jurotek, yes, that would probably work, but it shouldn’t be necessary and it makes the script a whole lot less flexible and versatile if you need to continuously add additional classes every time you want to add a new row of equal height content. Chris Coyer had previously written a tutorial about equal height columns here, where each row is measured separately, but it doesn’t really work as expected… https://css-tricks.com/equal-height-blocks-in-rows/

@Mottie took what Chris did and improved upon it and made a plugin out of it, and it works pretty good, but it wasn’t at all responsive…

https://css-tricks.com/forums/discussion/comment/46978/#Comment_46978

I’m looking for the best of both worlds. I’m sure it’s doable but I suck at writing JS too. @joshuanhibbert has come up with the closest solution I’ve seen thus far however.

[Fatbat]

@joshuanhibbert any ideas on how to make it work with multiple independent rows without having to apply a different class to each row? BTW, the Equalizer repository moved here… https://github.com/CSS-Tricks/Equalizer

[Fatbat]

Thanks @joshuanhibbert. Understood, and thanks for the reply!

[Mottie]

@joshuanhibbert LOL like I have a clue! :P

@Fatbat I’ll look at the demo tomorrow and see what I can come up with ;)

[Mottie]

Hmm actually you just want to center the content inside of the block? Instead of modifying the demos here to act like the [Equalizer](https://github.com/CSS-Tricks/Equalizer) plugin, you can just add this css* to the plugin ([demo](http://jsfiddle.net/Mottie/MkQj3/1/)):

.content-wrap > div:before {
content: ”;
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}

.equalizer-inner {
display: inline-block !important;
vertical-align: middle;
width: 100%;
}

You may not like the `!important` flag in the css. If that’s the case, you can just remove the styling from the `equalizer-inner` in the code at [line 36](https://github.com/CSS-Tricks/Equalizer/blob/master/js/jquery.equalizer.js#L36). So change this:

base.$col.wrapInner(‘‘);

to this:

base.$col.wrapInner(‘‘);

* Note: the css is from Chris’ article on “[Centering in the Unknown](https://css-tricks.com/centering-in-the-unknown/)”

[Fatbat]

@Mottie, the centering (either the way you described it above or using the css table/table cell method which I prefer because it’s pixel perfect) works fine with the version the guys here have come up with, but it doesn’t work with the Equalizer plugin because of that inner height wrapper span. The Equalizer plugin doesn’t need individual CSS classes for each independent row which is really nice. There’s one other issue here in that this script refreshes fine for a liquid layout, but for a fixed layout with a breakpoint, say at 959px, it doesn’t recalculate the column heights and the content overflows it’s container when you resize the screen smaller. When you hit the smaller breakpoint defined in the script, things stack fine and the boxes recalculate then.

So yeah, not really sure what to suggest. I could use the script here and define individual classes for each row, which is workable but isn’t ideal. Or we could figure out how to get around the inner height wrapper span in the Equalizer plugin. Your thoughts?

[Mottie]

Ok, I spent some time working on the Equalizer plugin to allow setting a breakpoint. I’ll try to finish it up tomorrow after I make a nice demo and work out the bugs :)

[Fatbat]

Breakpoint @Mottie? Now I’m confused :) The only thing the Equalizer plugin doesn’t allow for, the one in the CSS-Tricks repo, is vertical centering. Otherwise it’s perfect. It’s the one here that has issues with breakpoints.

[Mottie]

@Fatbat: That demo above IS Equalizer. It still has the inner span, and all it needed were those two lines of css to vertically center the content. Or was there something I’m missing?

[Fatbat]

@Mottie: I much prefer the following for vertical centering…

.vertical-center-wrapper {
display: table;
width: 100%;
}

.vertical-center {
display: table-cell;
vertical-align: middle;
}

…it’s lighter and pixel perfect (doesn’t require the -em shim). However, the CSS you posted above doesn’t work either. The span measures the height of the content and sets that in the style and then any vertical centering happens within that span, but I want to be vertically centering the content to the height of the column.

[Mottie]

@Fatbat Try this then ([demo](http://jsfiddle.net/Mottie/cuuqL/1/))

HTML

Header

Text.

…

Script

$(‘.content-wrap’).equalizer({
columns: ‘article’
});​

CSS

.equalizer-inner {
display: table !important;
width: 100%;
height: 100%;
}

.equalizer-inner div {
width: 100%;
display: table-cell;
vertical-align: middle;
}

[Fatbat]

Hey @Mottie. Sorry, got busy with other things and only just getting back to this now.

Your demo divs grows taller when the viewport is shrunk but don’t get shorter when the viewport is made bigger again.

[Author]

Posts