RIght aligning text div inside img element

Question

I am having a very simple structure as follows:

<div class="inline">
    <div class="photo-group thumb_wrapper">
      <img  src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQYZ35nsT0CRTlGBtNmPHikH74wXBldsPe8LQYfhXnzADYo-xSU"
           />
      <div class="thumb_icon label-inverse">
        <p class="thumb_icon_content">
                243 x 324    
        </p>
      </div>
      <div class="thumb_time label-inverse" ><p                 class="thumb_time_content">11.41 Kb</p></div>

http://jsbin.com/nomekagojo/3/edit?html,css,output

i want to have the .thumb_icon_content left align on the img and the .thumb_time_content right aligned on the img. the main issue is that the img doesn't always takes up 100% of the the .photo-group div. if I would put width:100% on the img, it will be OK but i want to display the img without changing it's resolution.

How can i achieve it?

any help will be most appreciated!

Thanks, Alon

Answer 1

This will do the trick for you:

 p.thumb_time_content {float:right;}
 .inline {display:inline-block;}

JSFiddle

display:inline-block; will prevent parent div from stretching and wraps it around content.

Answer 2

 *{ padding: 0; margin: 0; box-sizing: border-box; } .thumb_wrapper { display: table; } .thumb-caption{ display: table; width: 100%; } .thumb-cell{ display: table-cell; vertical-align: middle; } .thumb_time p{ text-align: right; } 

 <div class="inline"> <div class="photo-group thumb_wrapper"> <div class="thumb-cell"> <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQYZ35nsT0CRTlGBtNmPHikH74wXBldsPe8LQYfhXnzADYo-xSU" /> <div class="thumb-caption"> <div class="thumb_icon thumb-cell label-inverse"> <p class="thumb_icon_content">243 x 324</p> </div> <div class="thumb_time thumb-cell label-inverse"> <p class="thumb_time_content">11.41 Kb</p> </div> </div> 

Answer 3

Try like this: Demo

.inline{
  width:250px;
}
.clear{
  clear:both;
  display:block;
  content:"";
}
.thumb_time_content {float:right;}
 .thumb_icon {float:left;}

Answer 4

If you want content on the image, you need to have it positioned absolute;

.inline {
  display: inline-block;
  width: auto;
  position: relative;
}
.thumb_icon_content {
  position: absolute;
  top: 0px;
}
.thumb_time {
  position: absolute;
  top: 0px;
  right: 0px;
  left: auto;
}