Vertically aligning an image to the bottom of a div tag

Question

<div class = "column2_SS">
 <img class = "weather_widget" src = "images/weather.png" alt = "Smiley face">
</div>

CSS code:

.column2_SS{
background-color: #f2f7fc;
float: right;
height: 171px;
width: 300px;
background-color: black;  /*#444444*/
margin-top: 20px;
margin-right: 100px;
border-radius: 7px;
vertical-align: bottom;}

.weather_widget{
vertical-align: bottom;}

vertical-align: bottom; doesn't work. I need to align the weather widget image to the bottom. Any solution? Find the attached image.

Edit: I have set the background color of column2_SS to black. If the image is bottom aligned the background color should not be black. See the attached image. There is a black row under the image which means that image is not bottom aligned.

Answer 1

You can position an element in relation to its parent using position: absolute and playing with the top/bottom/left/right values. vertical-align works for inline elements or table cells mostly (read more on MDN).

.column2_SS {
  background-color: #f2f7fc;
  float: right;
  height: 271px;
  width: 300px;
  background-color: black;
  margin-top: 20px;
  margin-right: 100px;
  border-radius: 7px;
  position: relative;
}

.weather_widget {
  position: absolute;
  bottom:0;
}

<div class="column2_SS">
  <img class="weather_widget" src="https://i.sstatic.net/iU1rX.png" alt="Smiley face">
</div>

Answer 2

Well, there is one of the classic fixes for this on the web, creating table-look markup...

<div class="table">
    <div class="table-cell">
        <img src="path/to/your/img.jpg">
    </div>
</div>

.table {
    display: table;
}

.table-cell {
    display: table-cell;
    vertical-align: bottom;
}

Also, absolute positioning will work fine, but I always use it as a last option, because of "jumping" behavior on some devices.