Make floating list elements equal height (with pure css)

Question

I have a list of lists. Sublists are floated left. See http://jsfiddle.net/P4Psf/

Is there a way to force these columns to be the same height as their neighbors (i.e. have Element 1, 2 and 3 equal height, then 4, 5, 6 equal height (but of course different from 1,2,3) etc. etc.)?

At the moment 7 and 8 put themselves below 5 and 6, where they actually should be below 4 and 5.

I of course could do this using javascript, but I'm hoping that there is a pure CSS solution that works in (at least) the modern browsers?

Answer 1

Add this to your CSS:

ul.themenboxen > li:nth-child(3n+1) {
    clear: both;
}

That will literally search in this form:

1. Find all elements which match :nth-child(3n+1), meaning every third element inside its parent.
2. Filter only those who are lis.
3. Filter only those who are direct descendants of ul.themenboxen.

Or in english, find every third element directly inside of ul.themenboxen, and apply clear: both on it.

Note: I'm not sure about lower IE support.

Example