how to target individual elements in grails g:render

Question

I have created a grails g:render tag that references images representing the favorite movies, books, music, etc of a user in my project. The problem I am having is in styling the collections. I cannot seem to target the individual images of a specific collection, say music. Can someone help me find a way to target the images within the g:render for a SPECIFIC COLLECTION? I have provided the code for my gsp file and the template file. My goal is to style these images so that each category is shown as rows of its respective images, but when I try using float:left on the "like_content" divs, the entire collection is floated, not its individual images. Any help would be greatly appreciated.

EDIT: I have tried changing the id's into classes for the template images, and I also tried the ".like_content1 img" approach as well, but neither is working for me. My ultimate goal is to create 3 rows of the 3 different collections (movies, music, books), with the 5 images that are in each collections aligned in their respective row. I've included a mock-up image of how I want this to look like.

GSP:

<div class="like_content1">

    <g:render template="favorites" collection="${movies}" var="fav"/>

</div>

<div class="like_content2">

    <g:render template="favorites" collection="${music}" var="fav"/>

</div>

<div class="like_content3">

    <g:render template="favorites" collection="${books}" var="fav"/>

</div>

TEMPLATE:

<div id="favdiv">
<g:if test="${fav != null }">
    <img id="favimg" src="${fav.picture}">
    <p id="favname">${fav.name}</p>
</g:if>
</div>

CSS:

#favimg{
            width:150px;
            height: 150px;
            }               

            .like_content1{
            position: relative;
            left: 100px;
            bottom: 75px;
            }

            .like_content2{
            position: relative;
            left: 110px;
            bottom: 75px;

            }

            .like_content3{
            position: relative;
            left: 425px;
            }

Answer 1

First off, don't use an id on the elements in the template because you're not supposed to have more than one element with the same id on the same HTML page. But to achieve what you want you can use descendent selectors in your CSS

.like_content1 img {
  float:left;
}

This selector matches all img tags that occur inside an element with class like_content1 .

Answer 2

You need to float your images:

.like_content1 img {
    float:left;
}

And then you need to clear your float to start the next line:

<div class="like_content1">
    <g:render template="favorites" collection="${movies}" var="fav"/>
    <br clear="all"/>
</div>

<div class="like_content2">
    <g:render template="favorites" collection="${music}" var="fav"/>
    <br clear="all"/>
</div>

<div class="like_content3">
    <g:render template="favorites" collection="${books}" var="fav"/>
    <br clear="all"/>
</div>

Answer 3

as far as I understood it you need to point the CSS rule to the images in the .like_content. So, instead of writing

.like_content1{
    position: relative;
    left: 100px;
    bottom: 75px;
}

you use

.like_content1 img {
    position: relative;
    left: 100px;
    bottom: 75px;
}

Important: the id="xxx" is reserved for unique tags on a page. In your case adjust it to class="xxx" , also in the template, since the resulting HTML-page will have several substitutions of this template.

Answer 4

float the enclosing div, not the img

so something like,

    .like_content1 div {
        float: left;
    }