1

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)

What I have right now

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.

Thijs van Dam
  • 61
  • 1
  • 4

0 Answers0