html - Set div in unordered using css -

i have more 6 divs , want set float left , 1 after auto resize per content size using css per image below

here code:

<div class="main-container">     <div class="container">       <div class="title">test1</div>       <div class="content">testing of css html long content</div>     </div>     <div class="container">       <div class="title">test2</div>       <div class="content">testing of css html long content</div>     </div>     <div class="container">       <div class="title">test3</div>       <div class="content">testing of css html short content</div>     </div> <!-- , on ... --> </div> 

any appriciate. thanks

from know, cannot achieve using css only. following css solutions possible, each of them fails meet requirements.

float: left; clearing

this can achieve using float:

for work, have clear float every 4th element. recommendation use

.container:nth-of-type(3n+1) { clear: both; } 

display: flex;

what can achieve using display: flex; similar, .container in 1 "row" have same height determined "highest" .container.

css columns

the way know of create type of layout showed using css colums. this have massive drawback containers stacked first in vertical order, , if column filled next .container pushed next column. 2 below 1, not right of it.

javascript-based solutions

as mentioned in answer, there's load of solutions available based on javascript.

find 2 mentioned before here:

http://masonry.desandro.com/

http://www.wookmark.com/jquery-plugin