CSS HTML How to align image within div to bottom right

css, html

Solution

The only way I could think to keep the image on the right and bottom, using plain CSS, is to position it absolutely:

#solutionsNav div.leadgen {
    background:url(/images/leadGen_bg2.png) no-repeat;
    background-size: 100% 100%;  
    padding: 10px;
    color: #FFF;
    cursor: pointer;
    position: relative;
}
#solutionsNav div.leadgen img {
    padding: 0 5px 10px 10px;
    position: absolute;
    bottom: 0;
    right: 0;
}

I don't know if that maintains what you want in the layout, though.

If the image is purely decorative, you could make it part of the background, and then position it with background-position on the parent element.

Problem

So I have a div with a background image Mark up as follows ``` <div class="leadgen"> <h3><asp:Literal ID="LeadGenSpotTitleLiteral" runat="server"></asp:Literal></h3> <img src="/images/leadGen_hand.png"/> <span> <asp:Literal ID="LeadGenSpotDescriptionLiteral" runat="server"></asp:Literal> </span> </div> ``` What I am trying to do is to keep the image `<img src="/images/leadGen_hand.png"/>` on the bottom right floating to the right of the text in the span. Current CSS ``` #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; } ```

Original source