Question

I am creating an image gallery where there are 9 list items per slide but with only 1 unordered list. The reason I am doing it this way so the content can be easily added into the CMS rather than having to add a new unordered list everytime they wish to add a gallery.

The way that the code is set up is:

<div class="gallery">
<span class="prv_button"><a href=""></a></span>
<div class="gallery_wrap">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span class="nxt_button"><a href=""></a></span>
</div>
</div>

At the moment the unordered list does not have a width as it needs to be able to scroll to the next set of list item but at the moment there displaying inline next to each other. However I want to display underneath one another in 3’s. I have tried setting a height on the unoreder list but that does not make a different because of the width of the unordered list.

Please let me know if you require anymore information.

Thanks,

Josh

Answer 1

My first ideas to solve this are CSS selectors like:

/* quick & dirty */
ul li:nth-child(3n):after {
    content: '<br />';
}

OR

ul li {
    float: left;
}

ul li:nth-child(3n+1) {
    display: block !important;
}

This should position the 1st, 4th, 7th, … list item (i.e. picture) to the very left with three pictures in a row.

You could also try to put fixed widths so that the elements have got to obey:

ul {
    width: 650px;
}

ul li {
    float: left;
    margin: 0 5px 5px 0;
    width: 150px;
}

Let me know when there’s something odd with the code or if I misunderstood your question, I’ll try to fix it accordingly.