css position an element at the bottom of the page

Question

I need some tips about the best way to position one or more image at the bottom of the page or a container div. If possible css only.

The only way I can accomplish that is using jquery :(

Answer 1

you can use position: absolute for it. Demo: http://jsfiddle.net/R2V4U/

Answer 2

Position: 'absolute' is the answer, however you might want to set your body or a a div container for position: 'relative' to give a point of reference to the image.

I tried using this for footer at the bottom of a document and it worked only when I set my body for position: 'relative'. Having said that, it might not be the best practice to set body like this, so it is best to use a container with relative position for your whole page inside the body.

Answer 3

Try position: fixed. That will position any block element (div, image) at a fixed location with respect to the page. The element will stay there when you scroll (except on tablet/mobile devices). For example:

div#bottom {
  position: fixed;
  bottom: 0;

  /* And if you want the div to be full-width: */
  left: 0;
  right: 0;
}