Using :nth-child to align your floating div elements

via uxmilkshake.com

Creating a grid layout where your floating elements are getting knocked off alignment? I know, annoying, right?

This can happen with images, list items, or anything that uses a column based grid layout — like Bootstrap. See below for an example:

At first this can be confusing, because you expect the elements to align properly when you apply `float: left` to them. However, this happens when you float elements of different heights. Check out how the list items are highlighted when we inspect this screen using Chrome’s developer tools.

Before, without highlighting these list items it was difficult to tell the differences in heights. Now we can clearly see where the problem lies. The misaligned list item is pushing to the right of the taller elements above it and fitting in snuggly like a well placed Tetris piece (cue music). This is obviously not what we want to happen. Our goal is to have each row completely clear the row above it.

Here’s how to do it…

The solution lies in our friend the clear property. Let’s go back to CSS 101 and check out what w3schools says about it:

“The clear property is used to control the behavior of floating elements. Elements after a floating element will flow around it. To avoid this, use the clear property. The clear property specifies on which sides of an element floating elements are not allowed to float”

Initially after reading this it’s easy to get steered in the wrong direction and just apply clear: left to all of our images. However, as you may have guessed, or tried yourself, clearing each image will create a layout with one image per row.

What we really want to do is clear the FIRST image of each row. This will essentially create a whole new row each time. To accomplish this, let’s bring in the nth-child() selector to only target the elements we need.

Our responsive design is built using Bootstrap and has 3 kinds of grid layouts: 1 across, 3 across, and 4 across*. We can ignore the single column layout as they are full width and will clear on their own. Therefore, we need 2 formulas: one that will clear every 3rd image for smaller screens, and another that will clear every 4th image for larger screens. Luckily, we don’t have to figure out the formulas on our own as CSS tricks created a handy tool called the :nth Tester** that will do it for us.

* Remember to keep different responsive layouts in mind from the beginning.

** Bookmark this url to come back to it when you need it. Some of the formulas can get complicated. This will make your life a whole lot easier. Also, if you want to dig a bit deeper, Chris Coyer wrote a good article a few years back on how the nth-child works.

Here are our 2 formulas:

• Clear every 3rd image: :nth-child(3n+1)
• Clear every 4th image: :nth-child(4n+1)

Let’s put it into action…

HTML:

<ul>
    <li class="video-block col-xs-12 col-sm-4 col-md-3"> <!-- col-xs-12 col-sm-4 col-md-3 are our Bootstrap classes for 1, 3, and 4 items across, respectively. -->
        <img src="your-image-src.jpg">
    </li>
</ul>

CSS:

/* Target 3 columns: */
@media (max-width: 991px) and (min-width: 768px) { 
    .video-block:nth-child(3n+1) {
        clear: left;
    }
}
/* Target 4 columns: */
@media (min-width: 992px) {
    .video-block:nth-child(4n+1) {
        clear: left;
    }
}

And here's the result:

As you can see no more Tetris blocks to cause us headaches. No matter how tall any of the elements are on each row, we will have a full row right underneath it. And that's the power of the :nth-child(), folks.

Got a question? Hit me up in the comments below...