balanced alternating column layout in CSS3

Question

I\'m trying create a balanced (2-) column-layout.

The content is not text but blocks and varies in height. The content should be placed alternatingly left and right, as

Answer 1

You could try a mix of flex and float (only tested in Firefox/IE10 and safari 5.1.7 , cause to my own opinion, CSS is not your solution)

http://codepen.io/gcyrillus/pen/zgAiw

But, in any CSS case you choose, the best is to relay on the mansonry script. CSS is not really adapted to this kind of layout. At this time you have many CSS method for layout and basicly: display and float.

You can easily use this together within your html tree structure but this methods are not meant to be mixed. A boxe will be floatting, an inline-level-box or block-level-box and each are suppose to interact in the flow. Float, breaks a line before itself after a non floatting element or slides down untill it has enough room, that you dispatch right/left via CSS r not.

inline-block moves away from floatting elements and breaks a line if not enough room left, floatting elements among inline-blocks will keep breaking a line before floating.

Column CSS will fill columns with content one by one. see : http://codepen.io/gcyrillus/pen/AtazJ

Inline-flex elements seems to work with floatting elements ... but is it suppose to untill it's a validated rule ?

What seems to be wised to me , is to used a javascript for the layout expected and relay on float or display:inline-block + width as a fall back.

Last solution is to think this ahead on your server side and dispatch your items in 2 containers with another appropriate markup if that is possible ( no idea of your real life content dispatched in your ol li ).

The CSS for the FLEX test :

li.gruppe
{
  background: #048;
  color: white;
  font: bold 32px Arial, sans-serif;
  text-align: center;
  box-sizing:border-box;
  border-bottom:1px solid white;
   border-bottom:1px solid white;
    display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flex;
  display: inline-flex;  
  width:50%;
 }
li:nth-child(even){
  float:right;
  clear:right;
  border-left:1px solid white;
  margin-top:0;
}