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

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