Web help hall of fame: CSS to make equal height or equal width divs

I’ve been trying to create a tiled Mondrian-esque web page layout forever, and I’ve struggled mightily with getting my <div>s to maintain their height and width no matter what content is within them. 2 resources finally got me to the answer.

This first from Nick Russler, “How to make a div take the remaining height” explains how to get an HTML element to fill up all remaining space on the screen (instead of only being as tall as it needs to be to show all of its content). I used solution 2 — display:table. It felt wrong, I think because there’s some old bad feeling about tables from back in the bad old days when lazy web developers would use HTML tables to do all their layout. But display:table seems to work the most reliably across platforms and browsers and is so easy to implement.

So after getting a <div> to take the remaining height, I needed to lay out a set of equal sized rectangles inside of it. I knew flexbox layout was the way to go, but I just couldn’t seem to get it working right. This SO post helped me finally figure out what was wrong. TL;DR set flex-basis: 0.

https://stackoverflow.com/questions/25066214/flexbox-not-giving-equal-width-to-elements

p.s. This comment from “dudewad” on the accepted answer is priceless:

The awesome thing about this answer is that you explain flex-basis with this example better than anywhere else on literally the entire internet. I’m going to contact MIT about giving you an honorary professorship

Leave Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.