how to set border properties for rows created by floating elements, using css?

Question

I've a inside container div. Now this gallery div (of set width = 800px) houses lots of thumbnails of sizes 100x100. The thumbnails are taken out from a database, and the number of thumbnails can vary based on the query used. Also, each of the thumbnails are set to "float:left" within the gallery div.

Now the question is, assuming 8 thumbnails get placed in each row, and assuming that 3 such rows got created by the query, can I give a border-bottom design to these rows?

Basically the question is, can i specify the border properties for the rows that are created by floating elements within a set width.

Thanks!

Answer 1

My contribution:

<ul>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
</ul>

ul { width:500px; }
img {
    width:50px;
    height:50px;
}
li {
    float:left;
    border-bottom: 1px solid grey;
    padding: 5px 5px 0;
}

Live: http://jsfiddle.net/Bduxm/5/

Answer 2

As far as I read your question.. then no, it's not possible as it stands.. your pseudo three "rows" are not actually wrapped in individual containers so there is nothing to put a border on

the answers you have so far assume you count the min/max number of images selected and wrap up to 8 in a containing element.. this containing element could then be given the border.. however I read from your question the number may vary depending on a query, could you add something to the query to wrap up to eight elements in each row?

---

added: you could probably use a repeating background image on the container with horizontal lines about 100px apart, then margin the images to leave space to show the line/borders