Question

I’m trying to get these DIVs to “flow” from left to right in sets of two, then for every odd one, make a new row in my client’s Joomla site (seen here http://centralcat.socialhippo.com/services/available-for-adoption.html
I’ve got the first two working, but when the third one is rendered, it goes to the right instead of being floated to the left.
I’m not married to the CSS so if there’s a better way (list, etc.) I’ll give it a try.

Answer 1

Simply add a height to #cat2adopt to fix this problem quickly. Just make sure the height is big enough to accommodate the content. this “problem” occurs when you have floated divs with varying heights.

You should also be using classes here, as IDs must be unique.

eg:

.cat2adopt { /* class="cat2adopt" */
    clear: right; /* don't really need this I don't think */
    float: left;
    height: 300px; /* added this */
    margin-bottom: 20px;
    margin-right: 20px;
    position: relative;
    text-align: center;
    width: 400px;
}