I'm not sure if CSS is going to be the right solution but I'd like to take a stab at it.

So what I want to do is create a CSS mechanism that will break a single column of div containers into two or more columns based on the number of div containers it contains. For instance, I have an area called #right-column in a dynamic CMS website. Within the right column are article teasers. I would like to be able to stack the article teasers in columns of three. So the first three teasers stack one on top of the other and the fourth starts a new stack.

The markup would be something like this:

HTML Code:
<div id="right-column">
    <div class="article-teaser"> . . . </div>
    <div class="article-teaser"> . . . </div>
    <div class="article-teaser"> . . . </div>
    <div class="article-teaser"> . . . </div>
    <div class="article-teaser"> . . . </div>
    <div class="article-teaser"> . . . </div>
</div>

I know I can use jQuery to count the number of containers and then manipulate the CSS but I wonder if there is a pure CSS method.

Thanks,
Andrew