I have a big container with smaller boxes in it. Here is how it currently appears: https://i.sstatic.net/HBEgZ.png
However, I would like it to appear like this: https://i.sstatic.net/YqIVf.png Basically, I want all the boxes inside the "container" to move up and left instead of down and left. Maybe using float isn't the right approach. How can I solve this problem?
You can view it yourself here: https://jsfiddle.net/sebastian3495/ea6L08bu/9/
HTML
<div class="container">
<div class="box" style="background: yellow;"></div>
<div class="box" style="height: 200px;background: brown;"></div>
<div class="box" style="background: green;"></div>
<div class="box" style="background: purple;"></div>
</div>
CSS
.container {
background: red;
width: 500px;
height: 500px;
border: 2px solid black;
overflow: hidden;
}
.box {
display: inline-block;
height: 100px;
width: 100px;
}