I am looking to ensure that each element is the same size and properly aligned. Currently, elements with fewer total weeks appear lower due to spacing issues as shown in the image below.
https://i.sstatic.net/EytLu.png
While I can add phantom rows to fix this problem, I prefer a CSS solution. How can I address this issue?
CSS
.miniMonth{
position: relative;
left: 0px;
display: inline-block;
padding: 30px;
width: 340px;
height: 327px;
cursor: pointer;
border: solid black 1px;
}
.contents {
position: fixed;
top: 50px;
bottom: 50px;
left: 0;
right: 0;
overflow: auto;
background-color: rgb(225, 225, 225);
}
HTML
<div class="contents">
<div class="miniMonth">/* CALENDAR CONTENT*/</div>
...
<div class="miniMonth">/* CALENDAR CONTENT*/</div>
</div>