help please solve the problem

There is a list in a block of a certain height. the height of the list is greater than the height of the block, so it is displayed in 2 columns

I can't do it so that at first the first column is filled with the items in the list, then the second. it looks like this

    1 answer 1

    Update

    http://jsfiddle.net/4E9sB/

    .wrap ol { list-style-position: inside; -moz-column-count: 2; /* Firefox */ -webkit-column-count: 2; /* Safari and Chrome */ column-count: 2; list-style-type: decimal; height: 200px; } 
     <div class="wrap"> <ol> <li><span>Real time analitics dashme analitics daboard</span></li> <li><span>Real dashboard</span></li> <li><span>Real time analitics dashboard</span></li> <li><span>Real time ard</span></li> <li><span>Real time analitics dame analitics dame analitics dashboard</span></li> <li><span>Real titics dashboard</span></li> <li><span>Real time analitics dashboard</span></li> <li><span>Real time anahboard</span></li> <li><span>Real time analitics dme analitics dame analitics daashboard</span></li> <li><span>Real time analitics dashboard</span></li> <li><span>Real time anahboard</span></li> </ol> </div>

    • Thanks for the solution. but the picture is slightly different - first the first column is filled to the full height of the parent block - cyklop77
    • So it is so tried to change? jsfiddle.net/4E9sB Updated . - vkovalchuk88
    • @ vkovalchuk88, you must first fill the left column, the entire height of the block, and only if it does not fit - the right one. See the picture attached to the question. - Risto
    • Are you laughing And how in my example, different? - vkovalchuk88
    • @ vkovalchuk88, increased the height several times - really works, please forgive. The text is large, with an increase of 100-200 pixels, the difference is not visible. - Risto