I have got 5 elements (which should all contain content) which all should search for their own place as the browser width changes. I want them to 'fill eachother out' so there will be no whitespaces (except at the end)
Picture above is what I have right now. As you see the third element is pushed down by the second.
I have five articles inside a div. These five articles have this css:
width: 100%;
max-width: calc(50% - 22px);
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #aaa;
background-color: #d5d5d5;
In short: I want the third element in my example to fill out the gap under the first element.
One solution I thought of myself was just changing the order of the different elements, but that would only clean it up a little bit, not solve the problem. (and it wouldn't work for different element lengths as they might change during time)
By the way: The content of the element is just some text. That is why the different elements have different heights, some have more text.