fancy css float + clearing

Question

Okay, I have four divs of unknown height, but fixed width. Although height is unknown, it can be assumed that div1 > div3 > div2. They are (currently) all in a row, floated. For example:

1111 2222 3333 4444
1111 2222 3333 4444
1111 2222 3333
1111      3333
1111

When I resize the viewport, I'd like the rightmost element to reposition itself, but into the "highest" possible position, and not clearing what is immediately left of it. Eg:

1111 2222 3333
1111 2222 3333
1111 2222 3333
1111 4444 3333
1111 4444

(this is not what happens under ordinary circumstances. 4 is positioned further down, such that it clears the bottom of 3)

And, on the next resize, the most "compact" arrangement, like so:

1111 2222
1111 2222
1111 2222
1111 3333
1111 3333
4444 3333
4444

(and again, 4 would be normally positioned lower down, such that it clears 3).

And lastly:

1111
1111
1111
1111
1111
2222
2222
2222
3333
3333
3333
4444
4444

I've tried some very creative arrangements, wrapping certain pairs of divs in a container div and applying different styles to that, positioning some elements absolutely, setting min / max widths on container divs, invisible shims, etc, etc. I've had success for some of these scenarios, but no solution is successful in all 4 possibilities. Any ideas? Also, I will not use javascript-- I'm looking for a pure-css solution, if it exists. Thanks

Answer 1

Using this as the markup:

<div class="column" id="col-1"><h2>One</h2></div>
<div class="column" id="col-2"><h2>Two</h2></div>
<div class="column" id="col-3"><h2>Three</h2></div>
<div class="column" id="col-4"><h2>Four</h2></div>

With media queries, you can adjust the styles based on the size of the viewport:

body { margin: 0; padding: 0; }

.column {
  width: 200px;
  display: inline;
  float: left;
  overflow: hidden;
}

.column h2 { text-align: center; }

#col-1 { padding: 400px 0; background: #ccf; }
#col-2 { padding: 200px 0; background: #fcc; }
#col-3 { padding: 300px 0; background: #cfc; }
#col-4 { padding: 100px 0; background: #ccc; }

@media (max-width: 800px) {
  body { width: 600px; }
  #col-3 { float: right; }
  #col-4 { display: block; float: none; }
}

@media (max-width: 600px) {
  body { width: 400px; }
  #col-1, #col-4 { float: left; clear: left; }
  #col-2, #col-3 { float: right; clear: right; }
}

@media (max-width: 400px) {
  body { width: 200px; }
  .column { display: block; float: none; }
}

Try it in jsfiddle.

The drawback is that these media queries aren't supported in IE8 and less. However, you can fake this with a minimal amount of javascript that sets a class on your document body when the window is resized: then you can specify your CSS selections based on that, e.g. body.width-200 .column { /* ... */ }.