title: Stacking Multiple Divs From Bottom to Top
body: <p>I am trying to align multiple divs (buttonNav) to the bottom of a container div (lowerNav). I have read every question on here regarding this and tried the CSS and it does not seem to work.  I tried this one: <a href="https://stackoverflow.com/questions/6401869/stacking-divs-from-bottom-to-top">Stacking Divs from Bottom to Top</a> amoung others, hoping someone can help.</p>
  
  <p>Here is my html, I have 5 of the lowerNav containers each with multiple buttonNavs that I want to align to the bottom of the lowerNav here is the code from one, they are all set up the same way:</p>
  
  <pre><code>&lt;div class="lowerNav"&gt;
    &lt;img src="image/contact-us.gif" width="126" height="27" alt=""/&gt;
  &lt;p&gt;Ready to get more information or contact us directly?&lt;/p&gt;
    &lt;div class="buttonNav"&gt;
      &lt;p&gt;&lt;a href=""&gt;Order Literature&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="buttonNav"&gt;
      &lt;p&gt;&lt;a href=""&gt;Downloads&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="buttonNav"&gt;
      &lt;p&gt;&lt;a href=""&gt;Email Sign-Up&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="buttonNav"&gt;
      &lt;p&gt;&lt;a href=""&gt;Meet Your Rep&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="buttonNav"&gt;
      &lt;p&gt;&lt;a href=""&gt;Ask a Question&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>.lowerNav {
   width: 160px;
   height: 325px;
   background-color: #e3dfd7;
   border: 3px solid #383431;
   float: left;
   margin: 15px 8px 0px 8px;
       text-align: left;
  display: table-cell;
      vertical-align: bottom;
  }
  .lowerNav p {
  padding: 5px 12px 12px 12px;
      }
  .lowerNav img {
  padding-top: 12px;
      }
  .buttonNav {
  background:url(image/button-lowerNav.jpg);
  width: 160px;
  height: 45px;
  display: inline-block;
      }
  .buttonNav p {
  text-align:center;
  padding-top: 14px;
      }
  .buttonNav a {
  color: #fff;
  font-size: 13px;
  text-decoration:none;
  font-weight:700;
      }
  .buttonNav a:hover {
  color: #fff;
  font-size: 13px;
  text-decoration:underline;
  font-weight:700;
      }
  </code></pre>