Place div on bottom

Question

I'm trying to place the div's in the bottom of the parent div.

/*ELEMENT*/
    .element{
        border: 1px solid gray;
        font-size: 8px;
        text-align: center;
        display: inline-block;
        margin-bottom: 0;
    }

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="jsContent">
    <div class="element" style="width: 20px; height: 252px;">018</div><div class="element" style="width: 20px; height: 350px;">017</div><div class="element" style="width: 20px; height: 254px;">016</div><div class="element" style="width: 20px; height: 614.8px;">015</div><div class="element" style="width: 10px; height: 100px;">014</div><div class="element" style="width: 20px; height: 100px;">013</div><div class="element" style="width: 20px; height: 140px;">012</div><div class="element" style="width: 20px; height: 100px;">011</div><div class="element" style="width: 20px; height: 100px;">010</div><div class="element" style="width: 30px; height: 232.5px;">009</div><div class="element" style="width: 30px; height: 270px;">008</div><div class="element" style="width: 30px; height: 154px;">007</div><div class="element" style="width: 30px; height: 270px;">006</div><div class="element" style="width: 30px; height: 34px;">005</div><div class="element" style="width: 30px; height: 465px;">004</div><div class="element" style="width: 30px; height: 305px;">003</div><div class="element" style="width: 30px; height: 562.5px;">001</div>
</div>

I've tried:

margin-bottom: 0;
float: bottom;

I'd ike the staples to rise.. not drop :)

`vertical-align: bottom`, duh. – CBroe Feb 27 '18 at 11:09 — CBroe, Feb 27 '18 at 11:09

score 0 · Accepted Answer · answered Feb 27 '18 at 11:09

Apply vertical-align:bottom to the div.

.element{
    border: 1px solid gray;
    font-size: 8px;
    text-align: center;
    display: inline-block;
    margin-bottom: 0;
    vertical-align:bottom;
 }

.element{
        border: 1px solid gray;
        font-size: 8px;
        text-align: center;
        display: inline-block;
        margin-bottom: 0;
        vertical-align:bottom;
    }

<div class="jsContent">
    <div class="element" style="width: 20px; height: 252px;">018</div><div class="element" style="width: 20px; height: 350px;">017</div><div class="element" style="width: 20px; height: 254px;">016</div><div class="element" style="width: 20px; height: 614.8px;">015</div><div class="element" style="width: 10px; height: 100px;">014</div><div class="element" style="width: 20px; height: 100px;">013</div><div class="element" style="width: 20px; height: 140px;">012</div><div class="element" style="width: 20px; height: 100px;">011</div><div class="element" style="width: 20px; height: 100px;">010</div><div class="element" style="width: 30px; height: 232.5px;">009</div><div class="element" style="width: 30px; height: 270px;">008</div><div class="element" style="width: 30px; height: 154px;">007</div><div class="element" style="width: 30px; height: 270px;">006</div><div class="element" style="width: 30px; height: 34px;">005</div><div class="element" style="width: 30px; height: 465px;">004</div><div class="element" style="width: 30px; height: 305px;">003</div><div class="element" style="width: 30px; height: 562.5px;">001</div>
</div>

Place div on bottom

1 Answers1