Vertically align an image to the bottom of a div that contains a list

Question

I have a div, which has some content in it, a list of items.

I want the image to be aligned to the bottom so the user can select it. For some reason I cannot get the image to align to the bottom, I have tried the pseudo element, and span elements, nothing seems to work.

Here is what I have done so far:

css:

div.greybox{
    border:solid 8pt;
    border-color:rgb(169,172,176);
    display:inline-block;
    border-radius:10px;
    width:290px;
    height:306px;
    padding:10px;
    vertical-align:top;
}

div.greybox:before {
    content: ' ';
    display: inline-block;
    vertical-align: bottom; /* vertical alignment of the inline element */
    height: 100%;
}

div.greybox span{

    display: inline-block;

    vertical-align: bottom;

}

/*this is just for the image, I dont care much about this*/
img{
  width:247px; height:76px;
}

html:

<div class="greybox col-md-offset-0">
    <ul>
        <li>
            an absence of medium or high risk criteria
        </li>
    </ul>
    <span><img  src="http://www.nacacnet.org/studentinfo/PublishingImages/fish.jpg" /></span>
</div>

https://jsfiddle.net/b5ps3xcc/

Here is how I want it to look:

score 3 · Accepted Answer · answered Jul 31 '16 at 19:48

As far as I know, vertical-align can only be used to control the position of inline-elements within the line of text they're in (except when used with tables, but that's a different story).

But fear not, flexbox to the rescue!

Apply this to the div:

display: flex;
flex-direction: column;

And this to the ul:

flex: 1;

display: flex; will turn the div into a flexbox that positions its contents evenly distributed over the available space.
flex-direction: column; will make it do so in a vertical manner.
flex: 1; on the ul will make that element grow to fit if there is left over space.

Below are those attributes implemented into your fiddle, with vendor prefixes.

div.greybox{
    border:solid 8pt;
    border-color:rgb(169,172,176);
    border-radius:10px;
    width:290px;
    height:306px;
    padding:10px;
  
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

div.greybox ul{
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

/*this is just for the image, I dont care much about this*/
img{
  width:247px; height:76px;
}

<div class="greybox col-md-offset-0">
    <ul>
        <li>
            an absence of medium or high risk criteria
        </li>
    </ul>
    <span><img  src="http://www.nacacnet.org/studentinfo/PublishingImages/fish.jpg" /></span>
</div>

Note that this is an HTML5 feature, so older browsers will most likely not support it, particularly IE has very poor support. For detailed compatibility information, see caniuse.com.

As a last resort for ancient browser support (and for the sake of completeness of this answer), you could use tables to achieve what you want, by giving the table itself and the cells on the last row an explicit height, and letting the height of cells on the upper row(s) be calculated implicitly.
But that's evil and wrong, so don't do it unless you have to.

Exactly what I needed, I used display: inline-flex; so I can have 3 of these gray boxes — Kevin, Jul 31 '16 at 19:55
Thanks. I needed to add an empty div and set is a flex 1 to push the other images to the bottom. — Ronen Festinger, Nov 28 '18 at 15:36

score 1 · Answer 2 · answered Jul 31 '16 at 19:48

Using Absolute positioning of the span containing image:

div.greybox {
  border: solid 8pt;
  border-color: rgb(169, 172, 176);
  display: inline-block;
  border-radius: 10px;
  width: 290px;
  height: 306px;
  padding: 10px;
  vertical-align: top;
  position: relative;
}

div.greybox span {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
}

/*this is just for the image, I dont care much about this*/
img {
  width: 247px;
  height: 76px;
}

<div class="greybox col-md-offset-0">
  <ul>
    <li>
      an absence of medium or high risk criteria
    </li>
  </ul>
  <span><img  src="http://www.nacacnet.org/studentinfo/PublishingImages/fish.jpg" /></span>
</div>

This is great, but something more responsive would be better. Thank you! — Kevin, Jul 31 '16 at 19:56

score 1 · Answer 3 · answered Jul 31 '16 at 20:02

for older browser , you can use the table-layout properties: example: https://jsfiddle.net/b5ps3xcc/2/

div.greybox {
  border: solid 8pt;
  border-color: rgb(169, 172, 176);
  display: table;
  border-radius: 10px;
  width: 290px;
  height: 306px;
  padding: 10px;
}
div.greybox ul {
  display: table-row;
  height: 100%;
  /* will take as much space that is avalaible pushing other content down; */
}
/*this is just for the image, I dont care much about this*/

img {
  width: 247px;
  height: 76px;
}
li + li {
  color: #CA3100;
}

<div class="greybox col-md-offset-0">
  <ul>
    <li>
      an absence of medium or high risk criteria
    </li>
    <li><b>See it as an alternative to flex, but greybox will grow taller if content goes tallervthan initial height...</b>
    </li>
  </ul>
  <span><img  src="http://www.nacacnet.org/studentinfo/PublishingImages/fish.jpg" /></span>
</div>

score 0 · Answer 4 · answered Oct 10 '17 at 10:09

This exp. code work well for me.

<style>
.listing_container{width:300px; height:300px;font: 0/0 a;}
.listing_container:before { content: ' ';display: inline-block;vertical-align: bottom;height: 100%;}
.listing_container img{ display: inline-block; vertical-align: bottom;font: 16px/1 Arial sans-serif; max-height:100%; max-width:100%;}
<style>

<div class="listing_container">
    <img src="http://www.advancewebsites.com/img/theme1/logo.png">  
 </div>

Vertically align an image to the bottom of a div that contains a list

4 Answers4