How to align an icon to the right of content

debugcn Published at Dev

SearchForKnowledge

I have some contents within a DIV. I want to add an image icon to the right of but not push down the rest of the contents underneath it.

Here is my HTML:

<div id="subpageFooter">
    <div id="subpageFooterLeft">
          <div style="z-index: 15; position: relative; left: 0; padding-left: 20px; padding-top: 30px; font-weight: bold; color: #00A0BE; font-size: 13px;">
                Administrative Office
          </div>
          <div style="z-index: 14; position: relative; left: 0; padding-left: 40px; padding-top: 10px; padding-right: 8px; font-weight: normal; color: #000000; font-size: 12px;">
                1250 Avenue, Purchase, NY 36253-2547<br>
                972.656.0700<br>
          </div>
          <img style="position: relative; display: inline-block; left: 80%; margin-right: 15px; width: 52px; height: 51px;" src="theImages/locateit.png" title="Locate Administrative Office" alt="LocateAdministrative Office" />
    </div>
</div>

Here is my CSS:

#subpageFooter {
    position: relative;
    width: 100%;
    height: 625px;
    background: url('../theImages/bg_90_w.png');
    /*box-shadow: 0 0 10px #FFFFFF;*/
}
#subpageFooterLeft {
    position: absolute;
    left: 0;
    float: left;
    width: 60%;
    height: 100%;
}

With the above code the page displays the following:

enter image description here

What I really want is:

enter image description here

Also when I resize the page the content on the left and the icon on the right will proportion correctly in space taken.

How can I accomplish that?

Mark Overton

If you change your code around a bit it works.

<div id="subpageFooter">
<div id="subpageFooterLeft">
      <div style="z-index: 15; position: relative; left: 0; padding-left: 20px; padding-top: 30px; font-weight: bold; color: #00A0BE; font-size: 13px;">
            Administrative Office
          <img style="position: absolute; float: right; display: inline-block; left: 80%; margin-right: 15px; width: 52px; height: 51px;" src="theImages/locateit.png" title="Locate Administrative Office" alt="LocateAdministrative Office" />
      </div>
      <div style="z-index: 14; position: relative; left: 0; padding-left: 40px; padding-top: 10px; padding-right: 8px; font-weight: normal; color: #000000; font-size: 12px;">
            1250 Avenue, Purchase, NY 36253-2547<br>
            972.656.0700<br>
      </div>
</div>
</div>

Working fiddle:

http://jsfiddle.net/nbx7F/

Collected from the Internet

Please contact [email protected] to delete if infringement.