How to align content of a div to the bottom

Answer 1

If you have multiple, dynamic height items, use the CSS display values of table and table-cell:

HTML

  

    


      
my bottom aligned div 1
      
my bottom aligned div 2
      
my bottom aligned div 3

    
  

CSS

html,
body {
  width: 100%;
  height: 100%;
}
.valign {
  display: table;
  width: 100%;
  height: 100%;
}
.valign > div {
  display: table-cell;
  width: 100%;
  height: 100%;
}
.valign.bottom > div {
  vertical-align: bottom;
}

I've created a JSBin demo here: http://jsbin.com/INOnAkuF/2/edit

The demo also has an example how to vertically center align using the same technique.