When attempting to stack elements on top of each other, I encounter unwanted white space due to varying heights of the elements.
I am trying to figure out how to move boxes 6 and 7 up while keeping all corresponding elements beneath them aligned properly.
.blockParent {
text-align: center;
position: relative;
width: 90%;
left: 5%;
}
.block {
position: relative;
display: inline-block;
width: 500px;
background-color: red;
height: 200px;
margin: 5px;
}
.smaller {
height: 100px;
vertical-align: top;
}
<div class="blockParent">
<div class="block">
</div>
<div class="block">
</div>
<div class="block smaller">
</div>
<div class="block smaller">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block ">
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
This arrangement gives the following result: https://i.sstatic.net/lux0y.png
I believe that using flexbox could potentially solve this issue, although I lack experience with it. Any suggestions? Thank you in advance!