Question

I really need your help with this because I’ve no idea if this is even possible or correct.

This is my HTML

So, as you can see I have a <ul> with multiple <li>‘s in it. And what makes my whole thing complicated is the fact that there are <li class="wrapper year"> in it.

All those <li>‘s are floated side by side in 4 columns. I need a clear after every 4th element so the next row is horizonatally on the same level. However the <li class="wrapper year"> items are excluded from this behaviour because they should always clear:both.

First off, I know this might not be the perfect HTML Structure to have the “year” count also in a <li> element but based on the CMS in the backgound it might not be possible to do this in another way!

This is the CSS

ul.event-items li:not(.year):nth-of-type(4n+1) { clear: right; }
ul.event-items li:not(.year):nth-of-type(4n+2) { clear: left; }

Here is a live demo of the problem

This almost works fine, however I don’t get why the following is happening?!

So, as you can see the year 2012 as a count of 11 items, 2011 has 13 items, and 2010 has 12 items. So the vary because those items are based on a CMS.

The floating and clearing (after every 4th li) seems to work fine for 2012 and 2011 but when it comes to 2010 you can see the there is a clear after the 2nd element in this row. Why is that?

Answer 1

It’s happening because of your selector:

ul.event-items li:not(.year):nth-of-type(4n+2) { clear: left; }

You’ve an “orphan” in 2011. So the third li in 2010 is actually targeted by the rule above.
What you can do is to add two “blank” lis at the end of 2011.

Check the demo (the yellow ones are “blanks”). You can hide them if you want (same background color as the container etc.)

Over time, i’m sure, this structure will give you a lot of trouble. If you can’t divide it in many uls, at least use some other classes and markers…

Instead of targeting clearing lis with nth-of-type, add them a class (eg. clear-left, you actually don’t neet the clear:right;). The html will be a little “heavier”, but it’s surely safer.

Check this updated demo for another way to do it without nth-of-type and clear:right;

---

If you want to add the clear-left dynamically with jQuery, check this demo.

Here’s the function i used:

$('li.year').each(function(){
    $(this).nextAll('li').each(function(i){
        var li = $(this);
        /* break the loop when a new year is found */
        if(li.hasClass('year')) return false; 
        /* add clear-left to each 5th element */
        if( i > 0 && i % 4 == 0 ) li.addClass('clear-left');                      
    });
});​