Greg Shepherd Greg Shepherd - 16 days ago 5
CSS Question

Img align bottom to the bottom of a div

What I am trying to do is align my logo with the bottom of the header div which I have placed it in. I have the header split into 2 sections header left and header right I only need the site logo displayed on the left side of the header so it only needs to be a max of 350px with a 55px left margin. i can get it aligned in the center easily but Idk what is going wrong and why I can not get it to align to the bottom of the header. I tried some other steps from the forums here and nothing worked.



}
header {
background-color: #6699cc;
overflow: hidden;
margin: 0;
background: no-repeat center center cover;
display: block;
border: 0px;
position: relative;
padding: 10px 20px 20px;
}
#header-left {
width: 50%;
vertical-align: bottom;
display: table-cell;
}

<header>
<div id="header-left">
<img src="images/logo.png" alt="Tech World Today" align="bottom"/>
</div>
</header>




Answer

Add this to your css:

img {
  position: absolute;
  bottom: 0;
  left: 0;
}

See fiddle: https://jsfiddle.net/ocme3jqb/

PS: I added a set height width to your header to show you the effect.

Comments