move span element right to div tag

Question

I have below html code. How to move span element with image right to the div tag?

Below is the code

    <div style='width:600px;padding-top: 2px;padding-bottom: 1px'>
            <span style='padding-left: 25px'>" + rank + "</span >
           <span style='padding-left: 35px'><img id='img1' class='img-rounded' alt='' width='50' height='50' src='test.jpg' /></span>
           <span style='position:absolute;padding-left: 30px' >" + o.Title + "</span>
          <span style='position:absolute;float:right'>
            <img   class='img-rounded' alt='' width='20' height='10' src='images/Information.png' />
         </span> 

  </div >

expected ouput

`position: absolute` removes the floating possibility. Use `right:0` if you need to have it absolutely positioned, but also set the parent div to `position: relative` for it to work. https://stackoverflow.com/questions/11333624/float-right-and-position-absolute-doesnt-work-together — jtheman, Mar 21 '18 at 21:58

score 0 · Answer 1 · answered Mar 21 '18 at 22:02

float and position:absolute doesn't go together also span is inline element and needs to be made block before it will behave the way you intend.

<span style='display:block;float:right'>
    <img class='img-rounded' alt='' width='20' height='10' src='images/Information.png' />
</span>

score -1 · Accepted Answer · answered Mar 21 '18 at 22:00

<div style='width:600px;padding-top: 2px;padding-bottom: 1px;border:1px solid red;'>
  <span style='padding-left: 25px'>" + rank + "</span >
  <span style='padding-left: 35px'><img id='img1' class='img-rounded' alt='' width='50' height='50' src='test.jpg' /></span>
  <span style='padding-left: 30px' >" + o.Title + "</span>
  <span style='float:right'>
{IMG}<img class='img-rounded' alt='' width='20' height='10' src='images/Information.png' />
  </span> 
</div >

move span element right to div tag

2 Answers2