CODEWITHSUNDEEP
javascriptjquerycss
John
John

Reputation: 3945

how to get an image to display at the bottom of a div

I have a div 100% of the screen height, top of the DIV is a table...Idea being then white space with a image at the bottom of the DIV. When I add the image it appears directly under the table, as opposed to the bottom of the page. How can I fix this? I have tried many things from searching in google...

display:block
margin:0 auto;
bototm:0px

but no joy, does anyone have any ideas? thanks

Upvotes: 0

Views: 69

Answers (2)

NooBskie
NooBskie

Reputation: 3841

Add position: relative to parent div then add position: absolute; bottom:0px; to the image. This works in most cases but your could be different since you haven't posted the full code. Ps you have a typo bottom

Codepen http://codepen.io/noobskie/pen/epEPYw

Upvotes: 1

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19049

Flexbox is one way of doing it: http://codepen.io/zvona/pen/BodqBY

HTML:

<div>
  <img src='...' />
</div>

CSS:

div {
  display: flex;
  flex-direction: row;
}

img {
  align-self: flex-end;
}

Upvotes: 0

Related Questions