fancy css float + clearing -

okay, have 4 divs of unknown height, fixed width. although height unknown, can assumed div1 > div3 > div2. (currently) in row, floated. example:

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

when resize viewport, i'd rightmost element reposition itself, "highest" possible position, , not clearing left of it. eg:

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

(this not happens under ordinary circumstances. 4 positioned further down, such clears bottom of 3)

and, on next resize, "compact" arrangement, so:

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

(and again, 4 positioned lower down, such clears 3).

and lastly:

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

i've tried creative arrangements, wrapping pairs of divs in container div , applying different styles that, positioning elements absolutely, setting min / max widths on container divs, invisible shims, etc, etc. i've had success of these scenarios, no solution successful in 4 possibilities. ideas? also, not use javascript-- i'm looking pure-css solution, if exists. thanks

using 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, can adjust styles based on size of 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 in jsfiddle.

the drawback these media queries aren't supported in ie8 , less. however, can fake minimal amount of javascript sets class on document body when window resized: can specify css selections based on that, e.g. body.width-200 .column { /* ... */ }.