Grow your CSS skills. Land your dream job.

Problem with Equal Height Blocks in Rows

  • # June 5, 2011 at 11:56 am

    Hmm, ok try wrapping just that code in a

    $(window).load(function(){
    /* code here */
    });

    instead of a document ready – and btw when I test it on my desktop with document ready it never messes up the padding, so maybe it has something to do with images (but I don’t see any except in the background)? That’s why I’m getting you to try the window load.

    # June 5, 2011 at 12:13 pm

    Woohoo… that appears to have fixed it! Might be slower to draw the equal height columns maybe? A bit of “fouc” before the columns draw to the right heights. Nevertheless the problem seems solved for now. You were saying something about a plugin? Have you got a blog or website?

    Thanks a lot for your help!

    # June 5, 2011 at 6:53 pm

    YAY!

    Yeah I don’t post on it very often, but here is my blog and here is my github.

    # June 6, 2011 at 1:56 pm

    @Fatbat: Ok, I finally fixed all the bugs and made a github repository, and named it Equalizer. Check it out :P

    # June 12, 2011 at 8:49 pm

    Oh hai, I seriously need to check back here more often. I’ll scope your blog, git and the plugin. Thanks!

    # December 17, 2012 at 7:46 pm

    Hey Mottie. You still around? Have you done anything with this script to make it responsive? I’ve tried messing about with (window)resize a bit with it but haven’t had a lot of success. Drop me a line if you’re around.

    # December 17, 2012 at 10:25 pm

    I used to be a die hard ie6/7 fixer. They are dead now. Time to move on

    # December 17, 2012 at 11:16 pm

    Nothing about my last post had anything to do with IE6 or 7, but I’m going to guess you didn’t get past the first post from a year and a half ago before telling me what you think about legacy browser support. I actually want to know how we can make this script responsive. Unfortunately it looks like Mottie has removed it from his repository altogether. But hey, thanks anyways!

    # December 18, 2012 at 8:23 pm

    Hey @Fatbat!

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

    # December 18, 2012 at 11:17 pm

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

    # December 19, 2012 at 12:57 am

    @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 :(

    # December 19, 2012 at 11:01 am

    @Mottie, don’t know if you saw this post http://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?

Viewing 12 posts - 16 through 27 (of 27 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".