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

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.

Answer 2

This is something which you'd think would be simple but is actually really tricky.

The "sliding under" aspect isn't really related to maintaining the same size. That's just how floating works. They probably have a rule like:

.box { float: left }

with markup like:

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

If they gave .container a fixed width, that would prevent the .box's from sliding under each other.

If all you're looking for is to have background colors under various boxes of fixed width, there is an easy way to accomplish this without JS.

You can give .container a background image that has the backgrounds for all the boxes and tiles vertically. With your first example, it would be only a few pixels high with a 200 px section of orange, 200px of blue, 200px of red, and 200px of green.

Since if you "clear" the .container it grows to contain all the boxes, the background boxes would appear to all be the same height.

Anything more complicated such as vertically centering the text in the second example, and you're probably better off going with one of the JS scripts to even out the boxes.