Grow your CSS skills. Land your dream job.

Pure CSS Equal Height Blocks in rows

  • # August 9, 2013 at 8:33 am

    Hey, I’ve been struggling with CSS solutions for equal height blocks with margins in rows. I’ve finally come up with an article here http://blog.karenmenezes.com/2013/aug/9/all-things-are-not-created-equal/ and a demo here http://karenmenezes.com/snippets/equalheightcss-margins/index.html Feedback is welcome, do let me know if you encounter any issues with this. Of course, one can use Javascript, but this was a fun experiment playing around with display table!

    # August 27, 2013 at 2:42 pm

    Nice experiment, you run into a few unforseen problems with using display: table/cell/row especially in firefox – I found you need to be wary of your content length as tables expand and ignore min/max widths

    Take a peek at this for a different approach

    http://codepen.io/basement31/pen/Ifaeu

    # August 28, 2013 at 4:12 am

    Thanks Basement 31. In general, cells with display table will try to accommodate the width of the content, so this can become an issue in any browser. Thanks for the link you’ve sent. I’ve used this hack before, the only issue I see is that if you declare a border on the equal height divs, the bottom border is not applied due to the overflow hidden, margin/padding hack.

    # August 29, 2013 at 1:16 am

    Yes that is true, could probably be faked – I guess its a case of using the best solution for the scenario you find yourself in. Bring on flexbox!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

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