title: Float a DIV toward bottom-right using CSS
body: <p>I have three DIV and inside the DIV, I would like to float the "Learn More" to bottom right so it will be on top of the grey background.</p>
  
  <p><img src="https://i.stack.imgur.com/Bg1Hn.png" alt="three div"></p>
  
  <h2>CSS</h2>
  
  <pre class="lang-css prettyprint-override"><code>/* the div for LEARN MORE */
  #trt {
      z-index: 9999999999999;
      position: relative;
      float: right;
      bottom: 0; // not working
      top: 12; //not working
  }
  
  /* the entire div */
  .main .cols { padding-left: 2px; padding-right: 0px; padding-top: 10px; }
  .main .cols .col { width: 315px; height: 108px; float: left;  background: url(images/tempf.png) no-repeat 0 0; }
  .main .cols .col:after { content:''; width: 100%; clear: both; }
  .main .cols .col + .col { padding-left: 20px; }
  .main .cols .col img.hid { float: left; width: 129px; height: 108px;  }
  .main .cols .col-cnt { width: 183px; float: right; }
  .main .cols .col .more { font-weight: bold; color: #0206AA; }
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="main"&gt;              
      &lt;section class="cols"&gt;
          &lt;div class="col"&gt;
              &lt;a href="link.aspx"&gt;
                  &lt;img class="hid" src="css/images/orgNews.png" alt="" /&gt;
              &lt;/a&gt;
              &lt;div class="col-cnt"&gt;
                  &lt;h3 style="color: #FFFFFF;"&gt;Organization News&lt;/h3&gt;
                  &lt;p style="color: #FFFFFF;"&gt;Interfaith Medical Center related news and updates&lt;/p&gt;
                  &lt;div id="trt"&gt;
                      &lt;img src="css/images/arrow.png" width=11 height=11 align=absmiddle /&gt;
                      &lt;a href="link.asp" class="more"&gt;Learn More&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS - After Edit</h2>
  
  <pre class="lang-css prettyprint-override"><code>.trt {
      z-index: 9999999999999;
      position: absolute;
      bottom: 3px;
      right: 3px;
  }
  ...
  .main .cols .col-cnt { width: 183px; float: right; position: relative; }
  ...
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/kCKCd.png" alt="after edit"></p>
  
  <p>This CSS worked:</p>
  
  <pre class="lang-css prettyprint-override"><code>.trt {
      z-index: 9999999999999;
      position: absolute;
      top: 85px;
      right: 3px;
  }
  </code></pre>