title: Align text to the bottom of adiv
body: <p>I am trying to align my text to the bottom of div. Normally this is pretty straight forward when using fixed sizes for my divs. I ma trying something new with percentages and the vertical align doesn't seem to work at all.</p>
  
  <pre><code>$(document).ready(function(e) {
      var mh = parseInt($('#map').height());
      var h = 70 - ((20/mh)* 100);
      document.getElementById('map').style.height = h + "%";  
  });
  
  #map{
      width:95%;
      height:70%;
      background-color:#F00;
  }
  &lt;div id="home_header" style="display:table-cell; vertical-align:bottom; width:90%; height:30%;"&gt;
  &lt;h1&gt;There is currently &lt;?php echo $a; ?&gt; users playing worldwide at the moment.&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div id="map"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I do know that this can be done with fixed sizes, I have done i before and seen it done a few times. Heres 1 <a href="https://stackoverflow.com/questions/17123327/align-text-to-the-bottom-of-a-div">example</a>. Not sure why this doesn't work is a case of I have to use fixed sizes for the divs or is there another way?</p>
  
  <p>UPDATE- this method does work for fixed sizes, eg 100px;</p>