I have been attempting to align all the children of a div to the bottom, but so far have not been successful. I tried using the display: table and table-cell method that I found online, as well as some other methods, but none seem to work for me. You can find my code structure and a link to it here:
HTML:
<div class="a">
<div class="c"></div>
<div class="b">
<div class="al" style="background:green;"></div>
<div class="al" style="background:blue;"></div>
<div class="al" style="background:tan;"></div>
</div>
</div>
CSS:
.a{
float: left;
background: red;
display: table;
padding-right: 1px;
height: 100%;
}
.b{
position: relative;
float: left;
background: blue;
display: table;
height: 100%;
width: 29px;
}
.c{
height: 300px;
width: 90px;
background: grey;
float: left;
}
.al{
margin-top: 2px;
background: yellow;
display: table-cell;
width: 100%;
height: 30px;
padding: 20px;
vertical-align: bottom;
}
You can check out the full code on CodePen