Skip to Content

Clearing Thumbnail Lists in CSS

| CSS

Clearing floated lists are a common need when working with thumbnails whether for a gallery or blog layout. Here’s a solution that actually works and is inspired by this. Below is the example

Clearing Thumbnail Lists in CSS

Which can be downloaded here

 

The html:

<ul id="my-list">
    <li><img src="images/545X545.jpg"/><p>Some Text</p></li>
    <li><img src="images/545X545.jpg"/><p>Some Text</p></li>
    <li><img src="images/545X545.jpg"/><p>Some Text</p></li>

    <li><img src="images/545X545.jpg"/><p>Some Text</p></li>
    <li><img src="images/545X545.jpg"/><p>Some Text + Nam quis nulla nec neque eleifend consectetur in nec nisi. Vestibulum luctus justo ut lacus semper vestibulum.</p></li>
    <li><img src="images/545X545.jpg"/><p>Some Text</p></li>

    <li><img src="images/545X545.jpg"/><p>Some Text</p></li>
    <li><img src="images/545X545.jpg"/><p>Some Text</p></li>
    <li><img src="images/545X545.jpg"/><p>Some Text</p></li>
</ul>

 

and the css:

html{
    background: #f0f0f0;
    color: #c6c6c6;
    font-family: sans-serif;
}

ul#my-list{
    display: block;
    padding: 0;
    margin: 2px 0 0 2px ;
}

ul#my-list > li {
    list-style-type: none;
    float: left;
    margin-right: 15px;
    width: 233px;
    display: block;
}

ul#my-list > li > img {
    width: 100%;
    display: block;
}

/*clear left on every fourth item*/
ul#my-list > li:nth-of-type(3n+1){
    clear:left;
}

/*no padding on every third item*/
ul#my-list > li:nth-of-type(3n+3){
    margin-right: 0
}

Some things to take note of are

  • img: display:block to eliminate space below images.
  • li are floated left to get them to run horizontally
  • li:nth-of-type(3n+3) is used to eliminate the right margin on every third item
  • li:nth-of-type(3n+1) is used because we want a clear left on every fourth item (to make a list of 3 columns)

 

Also, try sizing down the browser window and notice how the list breaks when it goes down to 2 columns.

To fix this (if your site is fluid), simply change the 3n+1 to 2n+1 and the 3n+3 to 2n+2 in a media query so it will adapt to your browser window size.

Hope this helps you better Clear Thumbnail Lists in CSS! If you’re looking for more great tutorials on CSS layout, check out Topal’s post on: CSS Layout Tutorial: From Classic Approaches to the Latest Techniques.

Need to know how to make your search box responsive as well? See Full Width Responsive Search Box Using CSS Tricks.

Share This

«
»