My goal is to implement "vertical-align: bottom;" in order for the DIVs to align from the bottom of the wrapper/parent DIV to the top. However, I am facing an issue where I want the first DIVs to be displayed at the bottom, rather than at the default top position. This preference stems from my desire to always have the bottom row filled completely, even if it means adding new boxes on top.
The specific order of the DIVs is not crucial, but what I really aim for is having the very bottom "row" fully occupied, with the top row sometimes only containing 1 or 2 boxes. By introducing new boxes at the top rather than at the bottom, I believe this layout can be achieved. I hope this explanation makes sense.
In addition, I've noticed gaps between each "column" in the code provided below that I've been attempting to eliminate. While resolving the initial issue may require a complete code change, any insights into why these gaps are present would be greatly appreciated :)
Thank you!
Here's the current state of the code:
div.wrapper {
display: table-cell;
vertical-align: bottom;
height: 500px;
width: 640px;
background-color: lightgrey;
}
div.wrapper div {
width: 200px;
height: 50px;
display: inline-block;
}
div.wrapper div p {
margin: 0px;
padding: 0px;
}<div class="wrapper">
<div style="background-color: #7E7ECC;">
<p>1</p>
</div>
<div style="background-color: #FFA347;">
<p>2</p>
</div>
<div style="background-color: #80E680;">
<p>3</p>
</div>
<div style="background-color: #FF99C2;">
<p>4</p>
</div>
<div style="background-color: #A6DBEE;">
<p>5</p>
</div>
</div>And here is the desired outcome I'm aiming for:
https://i.sstatic.net/jfLOC.jpg
This alternative design would also work: https://i.sstatic.net/I1p4O.jpg