title: CSS HTML How to align image within div to bottom right
body: <p>So I have a div with a background image</p>
  
  <p>Mark up as follows</p>
  
  <pre><code>&lt;div class="leadgen"&gt;
      &lt;h3&gt;&lt;asp:Literal ID="LeadGenSpotTitleLiteral" runat="server"&gt;&lt;/asp:Literal&gt;&lt;/h3&gt; 
      &lt;img src="/images/leadGen_hand.png"/&gt;
      &lt;span&gt;
          &lt;asp:Literal ID="LeadGenSpotDescriptionLiteral" runat="server"&gt;&lt;/asp:Literal&gt;    
      &lt;/span&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>What I am trying to do is to keep the image <code>&lt;img src="/images/leadGen_hand.png"/&gt;</code> on the bottom right floating to the right of the text in the span.</p>
  
  <p>Current CSS </p>
  
  <pre class="lang-css prettyprint-override"><code>#solutionsNav div.leadgen {
      background:url(/images/leadGen_bg2.png) no-repeat;
      background-size: 100% 100%;  
      padding: 10px;
      color: #FFF;
      cursor: pointer;
  }
  
  #solutionsNav div.leadgen h3 {
       font-weight: bold;
       font-family: arial;
       color: #ffffff;
       font-size: 12pt;
       padding-bottom: 3px;
  }
  
  #solutionsNav div.leadgen span {
       font-family: arial;
       color: #ffffff;
       font-size: 10pt;
       margin: 0;
       padding: 0;
  }
  
  #solutionsNav div.leadgen img {
      padding: 0 5px 10px 10px;
      float: right;
  }
  </code></pre>