I want to achieve positioning like this (these are buttons but it doesn't matter):
|-------|-------|-------|-------|
| | | small | |
| | |-------| |
| big | big | small | big |
|-------|-------|-------|-------|
So I would call it positioning top to bottom, left to right - browser should put element below previous one if there is enough place, otherwise - put next to it. I don't know how many elements there will be, nor their width, etc. etc. - it has to be very flexible.
After short research I've found display: flex. It looks very promising (I don't need compatibility with different browsers - my plan is to do local app using html) but there is one problem.
Note: I don't want it to occupy 100% width - it should take only as much space as it needs. float: left on parent seems to be perfect.
In simple case: big button, big button, small button, big button - it works perfect. The problem appears when I add one more small button - it is displayed properly - under previous one BUT parent is bigger!
Here is code I got (and fiddle here, which shows those two cases: http://jsfiddle.net/h7SK7/):
<div class="container">
<button>Lorem</button>
<button class="small">Dolor</button>
<button class="small">Sit</button>
</div>
div.container {
height:50px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
float:left;
}
button {
height:50px;
}
button.small {
height:20px;
}
Can anyone help me?