Grow your CSS skills. Land your dream job.

Boxes of equal height

  • # December 20, 2012 at 11:48 pm

    @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?

    # December 21, 2012 at 3:49 pm

    @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.

    # January 3, 2013 at 2:58 pm

    @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;
    }

    # January 11, 2013 at 10:31 am

    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.

    # January 11, 2013 at 11:07 am

    It’s because of using the `display:table` to vertically center the content… which needs height set to 100%. The equalizer script doesn’t expect the height of an element that it adds to be set to 100%.

    The (http://css-tricks.com/forums/discussion/comment/85674/#Comment_85674) works great, and it looks “pixel perfect” to me.[code above](http://css-tricks.com/forums/discussion/comment/85674/#Comment_85674) works great, and it looks “pixel perfect” to me.

    # January 12, 2013 at 6:07 am

    @Mottie, I don’t know why my [Fiddle](http://jsfiddle.net/Fatbat/2HRB7/ “Fiddle”) isn’t working, but it works perfectly on my test site. I’ve not had any problems with the older version of Equalizer, it even equalizes divs more than one layer below the outer wrapper which is better, but of course it’s not responsive :(

Viewing 6 posts - 31 through 36 (of 36 total)

You must be logged in to reply to this topic.

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