I have a page with bootstrap cards with a width of 49%
, so two cards can be placed next to each other. This works just fine, but some of the cards are longer than others, so there appears to be some free space between 'two rows of cards'.
Example picture of the problem:
Example picture with behavior of the 'right column':
As you can see, the cards in the 'left column' are not sliding up, but the cards on the right do.
CSS I used:
.section {
min-width: 49%;
max-widht: 49%;
float: left;
}
#card_container {
overflow: hidden;
}
The HTML is just one div for the container and one div for each section (with bootstrap classes). The inline styles are just for example purposes:
<div id="card_container">
<div class="section" style="height: 500px"></div>
<div class="section" style="height: 200px"></div>
<div class="section" style="height: 900px"></div>
<div class="section" style="height: 300px"></div>
</div>
How can i achieve that the cards fill up the entire space, so there is no space left between the cards (except the default margins etc.)?