Pure CSS Equal Height Blocks in rows

[karenmenezes]

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!

[karenmenezes]

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.

[Author]

Posts