Skip to Content

Clearing Thumbnail Lists in CSS

|CSS|0 Comments

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 previewed 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.

Related Posts

Share This

Related Tags

no comments yet but open for them

Post a Reply

Your email address will not be published. Required fields are marked *