Greg Shepherd Greg Shepherd - 1 year ago 120
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;

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

Answer Source

Add this to your css:

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

See fiddle:

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download