How should I align one element to the right and one element to the left inside a containing element?

Question

This is very common case for me:

<div>
 <p>Left aligned element</p>
 <img title="right aligned element" />
</div>

I know three ways to solve this either

div{
  width: 100px;
}
p{
  display: inline-block;
  width: 70px
}
img{
  display: inline-block;
  width: 30px
}

As the size of the containers perfectly match the containing block, the right content will align with the right edge.

Con: My experience(don't know why) is that the pixel count differs from browser to browser. This makes the content drop down to the next row in some browsers.

div{
  height: 100px
}    
p{

  float: left;
}
img{
  float: right;
}

Con: The problem with this one is that I want the containing elements height to be set by the height of the p or img, whichever is taller. With the float they get height: 0

div{
  display: relative;
}
p{
  width: 70px;
}
img{
  display: aboslute;
  right: 0
}

Con: Thisone is reliant on the height of the left element, also It is more work to update get it to work on mobile devices. (typically, the contents like this tend to be placed on top of each other)

What approach do you use? Is there a better way?

Answer 1

I usually do

for left element

 display:inline-block;

for right element

 float:right;

it both resets and arranges floats. If I dont have anything on left, I just create an empty element for left then float the right in same way