8:40 pm
0
537
views

Vertically align a div to the bottom in css without tables

One of the great things about the good 'ol <table> days was the ability to valign="bottom" elements on the page, this is also possible in css with div's... albeit not as thorough.

If you want to vertically align a div to the bottom of it's container div, then the below would do the trick nicely:

<style type="text/css">
div.container{
  width:200px;
  height:200px;
  background:#eee;
  position:relative
}
div.bottom{
  width:100%;
  background:#ddd;
  left:0;
  bottom:0;
  position:absolute
}
</style>
<div class="container"><div class="bottom">some text</div></div>

The above example will tell the inner div div.bottom to sit at the bottom of the outer div div.container. The only downfall with this is the outer container will need a specified height, as height:100% won't work in some browsers on a non specified height container and/or parent.

The important part of the above is the bottom:0. This tells the browser to sit this element at the footer of it's parent at all times.

Also, as the outer div is positioned relatively, in Internet Explorer, you will need a fixed outer layer (e.g. floated, absoluted) otherwise Internet Explorer will not push any content below it down.