How to align an image to the bottom of the div? - html

Question

I'm trying to align an image to the bottom of the out div element using vertical-align,but this vertical-align doesn't seem to work,the image is not moving at all.
<div class="row">
<div class="col-md-1">
<img src="../images/image.png" style="height: 20px; width: 20px;cursor:pointer"/>
</div>
<div class=col-md-11 >
<div style="overflow:auto;height:300px"></div>
</div>
</div>
I'm using bootstrap classes for alignments. Is there anything that can make the image div align to the bottom of the outer div?Which is taking the height of second div which is 300px;.

Answer 1

If I understand you correctly, something like this should do the trick:
.parent {
position: relative;
height: 300px;
}
.child {
position: absolute;
bottom: 0;
}
You could add those classes to the DIV and the IMG respectively.
It looks like the parent div will be 300px high anyway because of the height set on the child in the adjacent div. If you specify the height of the parent instead, then you can absolutely position the child relative to the size of the parent.
If you don't set the parent as position:relative, then the child will be position relative to something else (like the page).
Vertical-align won't work because the IMG is an inline element, and the behavior you're expecting is table-cell dependent. With inline elements, vertical alignment is relative to the line and not to the parent container, so that an image aligned with text would sit in various positions relative to a given line of text.
Be sure to check the documentation for this and other questions, which is well-explained at MDN.

Answer 2

You can use flexbox for this. Appling the parent styles to the DIV. No extra styling needed for img
.parent {
display: flex;
justify-content: flex-end;
flex-direction: column;
}
Here's what you'll want to add if you don't have a taskrunner adding the prefixes for maximum compatibility.
.parent {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
Currently 97% of the browsers used today support flex.