HTML, CSS place div at the left instead of right of relative element

Question

I have this code snippet:

 #wrap { position: relative; width: auto; background: silver; border: 1px solid grey; } #text { position: absolute; width: 25%; right: 0; top: 0; bottom: 0; background: black; opacity: 0.5; filter: alpha(opacity=50); } 

 <div> <div id="wrap"> <img class="fit-img" src="~/Content/img/Assets/image.jpg"> <div id="text"></div> </div> </div> 

I need to place the DIV with the ID text at the left, not the right side of wrapped content. Any tips?

Answer 1

Just erase right: 0; and replace it with left: 0; in here:

#text {
  position: absolute;
  width: 25%;
  left: 0;
  top: 0;
  bottom: 0;
  background: black;
  opacity: 0.5;
  filter: alpha(opacity=50);
}