html - CSS Horizontal Wrapping Columns Layout -

i trying achieve layout in input fields appear in column. when column exceeds height of container, must wrap horizontally.

i have achieved layout using flexbox, flexbox (and more flex-wrap property) isn't enough supported. in case, need support modern web browsers , @ least ie9+

additionally, form content generated ember.js along lines of this method. model bound form changes, means number of input fields dynamic.

how can achieve layout more compatibly?

just updated fiddle little: http://jsfiddle.net/43k5s/6/

.menu-form {     background-color: lightgray;     padding: 1em 1.5em; }  .menu-form:before, .menu-form:after {     content: "\0020";     display: block;     height: 0;     visibility: hidden; }  .menu-form:after {     clear: both; }  .menu-form {     zoom: 1; }  .menu-form div {     width: 33%;     float: left; }  .menu-form div label {     display: block; } 

using floats , clearfix should work in major browsers (even older ie). might work fixed widths or media queries change number of columns.