Question

I think this should be quite simple, but I just can’t get it to work. In ASP.NET MVC I have a list of items like this:

<div id="FilmListContent" class="row">
    <div class="span12">
        <ul class="thumbnails">
            @foreach (var film in Model.Films)
            {
                <li class="span4">
                    <div class="thumbnail">
                        <a href="@Url.Action("Details", "Films", new { id = film.ID })">
                            <img src="@(String.Format("../../Content/Uploads/{0}.jpg", new object[] { FileUpload.CheckImageExists(Server.MapPath("~/Content/Uploads/"), film.ID) ? "Image_Film_" + film.ID : "NoImage" }))" alt="@film.Title image" />
                            <span>
                                @film.Title (@film.Year, @film.MediaType_Name) </span></a>
                    </div>
                </li>
            }
        </ul>
    </div>
</div>

Generates a nice list with 3 items per row, but when the @film.Title etc. content wraps to the next line I get an empty position on the next line. Like this:

I’ve tried display: table-cell, vertical align text-bottom etc, but I can’t get it to work. At the moment I have removed all css on the thumbnails. What css can I use to get 3 items per row no matter the size? Or do I need to fix the size?

Answer 1

Assuming you are using float: left to lay out the items, you can insert an element with clear: both after each set of three items to ensure that each line is positioned completely below the previous one.