Grow your CSS skills. Land your dream job.

Boxes of equal height

  • # December 18, 2012 at 8:16 am

    @joshuanhibbert, you nailed it, got up early cause I couldn’t wait to try it, thanx a bunch

    http://jsfiddle.net/jurotek/AwcXt/embedded/result/

    # December 18, 2012 at 9:57 am

    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?

    # December 18, 2012 at 10:06 am

    @Fatbat, I’ll be guessing here cause I have no knowledge of js whatsoever. If you give your boxes in footer different class name than the ones in content and add that class name to snipet, wouldn’t that work?

    Edit: I see you mention float clearing issue. You could easily take care of that if you set the display value of your boxes as inline-block instead float left. Here’s how I did it. I gave all my boxes .b1 thru .b6 font size 1em. First I floated them left and I checked the position of second box on x axis. I wrote it down. Than I changed display to inline-block and checked the position of second box on x axis again. I took that number and subtracted from it the first measurement taken when the boxes were floated and the difference I applied as margin-right minus Xpx. Hope I make sense.

    # December 18, 2012 at 10:32 am

    @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… http://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…

    http://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.

    # December 18, 2012 at 12:30 pm

    @joshuanhibbert, here’s my final solution to this. Since I din’t want at times boxes to be equal height like on class .b6 that stretches full width of content minus left margin or in some other situations, I set the var foo value to .equal and use that class where I want the boxes to be equal height like this.

    // Wrap everything in the document ready function
    $(document).ready( function() {

    // Cache variables
    var foo = $(‘.equal’),
    breakpoint = 640;

    // Run the following whenever the window is resized (also trigger on page load)
    $(window).resize( function() {

    // Remove the style attribute that is setting the height when resizing so that we can let the content dicate the height before working it out again
    foo.removeAttr(‘style’);

    // Set the height variable back to 0
    var height = 0;

    // Set the height to that of the tallest div
    foo.each( function() {

    if ($(this).height() > height) {

    // If an element’s height is larger than what is already stored, store the new height
    height = $(this).height();
    }
    });

    if ($(window).width() >= breakpoint) {

    // If the window is larger than the breakpoint width, set the height for all divs to the largest div’s height
    foo.height(height);

    } else {

    // If the window is narrower than the breakpoint, remove the style attribute that is setting the height
    foo.removeAttr(‘style’);
    }

    }).trigger(‘resize’);
    });

    # December 18, 2012 at 5:42 pm

    @jurotek Awesome! I’m glad it’s working for you :)

    # December 19, 2012 at 1:39 am

    @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

    # December 19, 2012 at 5:37 am

    @Fatbat There is, but I’m going to suggest asking someone that actually knows what they’re talking about to answer this question. @Mottie for example!

    You want to make sure you aren’t repeating code, and I’m not entirely sure on the best way to handle that.

    # December 19, 2012 at 9:19 am

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

    # December 20, 2012 at 2:24 am

    @joshuanhibbert LOL like I have a clue! :P

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

    # December 20, 2012 at 9:41 am

    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](http://css-tricks.com/centering-in-the-unknown/)”

    # December 20, 2012 at 11:15 am

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

    # December 20, 2012 at 7:10 pm

    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 :)

    # December 20, 2012 at 8:26 pm

    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.

    # December 20, 2012 at 11:07 pm

    @joshuanhibbert, @Fatbat, @Mottie,

    Hi folks. I decided to reopen this thread if I may to keep all my ideas in one place what I am working on and eventually try to use to redesign existing company fixed width website to responsive one. I am hoping to accomplish that sometimes by next Spring, I hope. Maybe I rename this thread to something like “Responsive Ideas” or so.

    Thanx to @joshuanhibbert, I overcome first thing and that is equal height to be used if necessary.

    For the past couple of days I am working on next element (some type of responsive navigation which would give decent UX) and didn’t take much vertical space. After trying several different ideas I settled on this. I moved it from fidle to Codepen. Somehow it doesn’t renders correctly in editor but full screen is ok. What is your opinion on this? Is something like this used? Here’s the link: http://codepen.io/jiri/full/Fhlgx

    Edit: BTW, I say responsive but it’s not quite. I had to limit this to 480px cause there’s no way I could squeeze lot of existing content objects to 320px. But I’ll be happy if I can accomplish that to 480px min.width.

Viewing 15 posts - 16 through 30 (of 36 total)

You must be logged in to reply to this topic.

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