title: Dynamic floating columns if height exceeded
body: <p>I've got a questing concerning a dynamic floating layout of <code>&lt;li&gt;</code>'s  in a <code>&lt;ul&gt;</code>-Container:
  <a href="https://i.stack.imgur.com/N4JtE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N4JtE.png" alt="Example" /></a></p>
    
  <p>The grey container <code>&lt;ul&gt;</code> has a fixed height of 150px and all <code>&lt;li&gt;</code>'s  in it should use the maximum height of 150px and THEN arrange in the next column (See Element 7, 8)</p>
  <p>I'm quite shure the solution is obvious, but I'm stuck in trying several float-combinations with width and height.</p>
  <p>Anyone suggestions or a solution?</p>