Ruby on Rails

Sorry, not sure where to post this on google groups.  I will move it if I find a CSS google group.

Anyways, I'm trying to overlay text onto an image (in my gallery) on upper and lower right corners.
I know my problem has to do with nesting the <divs>.  I'm just using placeholders for text now...  (I'll sub in some database values eventually).

Here's my css & bit of html.erb code...
/* categories css file...
/* Container holding the image and the text */
.imageholder {
  position: relative;
  text-align: center;
  color: white;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}




div.img {
  margin: 5px;
  border: 0px solid #ccc;
  float: left;
  width: 180px;
  height: 400px;
  overflow: hidden;
}

div.img2 {
  margin: 5px;
  border: 0px solid #ccc;
  float: left;
  width: 255px;
  height: 285px;
  overflow: hidden;
}

div.img:hover {
  border: 0px solid #777;
}

div.img img {
  width: 100%;
  height: auto;

}

div.desc {
  padding: 15px;
  text-align: center;
}
        <% @categories.each do |category| %>
    <div class="imageholder" >

      <div class="top-right">Top Right</div>
      <div class="bottom-right">Bottom Right</div>

     <div class="img2">

        <%= link_to category.name , category  %>

        <%= link_to image_tag(category.picurl ), category %>

      </div>
    </div>

thanks,

Joe