Kevin Kevin - 4 months ago 9
HTML Question

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

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:

image

Answer

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.

Comments