Can I do this without resorting to Javascript?
This demo , which is accompanied by this article , succintly describes what I need to do. However, I'm not impressed with the use of javascript for something that should be possible in pure CSS.
The linked articles (which I also found independently when looking for a way in CSS) do not serve the same function as the clock demo - the 456 box demo does not slide under other margins when the screen width gets too small.
I have been playing around with the article code and trying various ideas in CSS, but it doesn't get it right. Also I would prefer a progressive improvement to graceful degradation.
source to share
I realize this is an old question, but I wanted to bring up the answer you should be using now: flexbox . The original demo of the question is long gone, but the markup was like 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>
To align the height with flexbox, you need a container wrapped around them:
<div class="container container--equal-children">
<!-- those four divs -->
</div>
Setting to display: flex
and setting align-items
to "stretch" gives the desired effect:
.container--equal-children {
display: flex;
align-items: stretch;
}
After that, you can skip the whole measure of the size and let the kids bend over to fill in 1/4 of the gap:
.container--equal-children #one,
.container--equal-children #two,
.container--equal-children #three,
.container--equal-children #four {
flex: 0 1 25%;
}
They will all automatically have the same height.
I put together a CodePen that allows you to enable and disable flexbox rules . It's worth noting that only the toggle functionality requires JS. There are also some presentation-only style rules I have added (which are marked) to demonstrate design behavior.
source to share
Unfortunately, there really isn't a good way to do this in pure CSS. I assume you want the dynamic height of the containers based on one parent container. Cross-browser issues make it an absolute nightmare, and the relatively small amount of JavaScript required to achieve the effect is IMO a better approach than trying to keep the really ugly and nasty CSS rules, forcing other CSS rules to be imported to fix things up in some browsers, etc. etc. etc.
There is a reason these "equal heights" scenarios even exist, and this is because of how much of a problem it is in pure CSS.
I would stick with JavaScript solution.
source to share
This is what you think is simple, but is actually really difficult.
The "sliding" aspect has nothing to do with maintaining the same size. This is what floats. 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 the .container a fixed width, it would prevent the .box from sliding underneath each other.
If all you're looking for is to have background colors under different fixed-width cells, there is an easy way to do it without JS.
You can provide .container with a background image that has backgrounds for all rectangles and tiles vertically. From the first example, it will be just a few pixels high with 200px orange, 200px blue, 200px red and 200px green.
Since if you "empty" the container. it will contain all fields, all background fields will be the same.
Things get more complicated, like vertically centering the text in the second example, and you're probably better off going with one of the JS scripts even out of the box.
source to share