Is it possible to do this without resorting to Javascript?

Question

This demo, which goes along with this article, succintly describes what I need to do. However I am not impressed by the use of javascript for something that should be possible in pure CSS.

The articles referenced (which I also found independently when looking for a way in CSS) don't perform the same function as the watchmaker demo - the 456 boxes demo doesn't slide under the other boxes when the screen width gets too small.

I've been playing about with the article code and trying various ideas in CSS, but nothing lays out correctly. Also I would prefer progressive enhancement over graceful degradation.

Answer 1

I realize this is an old question, but I wanted to bubble up the answer you should be using now: flexbox. The original demo from the question is long gone, but the markup was this (courtesy of the Wayback Machine):

<div id="one">I am 150px high</div>
<div id="two">I am 200px high</div>
<div id="three">I am 120px high</div>
<div id="four">I am 300px high</div>

In order to equalize the heights using flexbox, you would need to have a container wrapped around them:

<div class="container container--equal-children">
  <!-- those four divs -->
</div>

Setting that to display: flex and setting align-items to "stretch" gives the desired effect:

.container--equal-children {
  display: flex;
  align-items: stretch;
}

Once that’s in place, you can skip the whole sizing thing and let the children flex to fill 1/4 the space:

.container--equal-children #one,
.container--equal-children #two,
.container--equal-children #three,
.container--equal-children #four {
  flex: 0 1 25%;
}

They will all automatically be the same height.

I put together a CodePen that lets you toggle the flexbox rules on and off. It’s worth noting only the toggling functionality requires JS. There are also some "for presentation only" style rules I’ve added (which are noted) to demonstrate the design behavior.

Answer 2

Unfortunately, there really isn't a good way to do it in pure CSS. I assume that you want a dynamic height of containers based on a single parent container. Cross-browser issues make it an absolute nightmare, and the relatively small amount of JavaScript needed to accomplish the effect, IMO, is a better approach than trying to maintain really ugly and nasty CSS rules, having to import other CSS rules to fix things in certain browsers, etc, etc.

There's a reason these "equal heights" scripts even exist, and it's because of how much of a hassle the effect in pure CSS is.

I would stick with the JavaScript solution.