CSS alignment issue

Question

I'm having trouble getting unordered lists consistent with the way I want them. Here is an image of what I want to achieve. How can I make it look like the version on the right?

I will have 1 to 6 unordered lists depending on the page, so I need a general solution. Here's a stripped down version of css and html that I'm using:

CSS:

    body { margin: 50px auto; width: 500px; }
    ul { 
        float:left;
        margin: 0 20px 20px 0;
        padding: 0;
        width: 200px; 
    }
    li { 
        background: #ddd;
        list-style: none;
        margin: 1px 0;
        padding: 5px
    }
    li.title { background: #333; color: #fff; }

HTML:

<ul>
        <li class="title">Title A</li>
        <li>1A</li>
    </ul>
    <ul>
        <li class="title">Title B</li>
        <li>1B</li>
        <li>2B</li>
        <li>3B</li>
    </ul>
    <ul>
        <li class="title">Title C</li>
        <li>1C</li>
        <li>2C</li>
    </ul>

Answer 1

I don't know about pure CSS method that can handle this common one .

I refused and used the jQuery plugin for this in the past for something like this:

Freemasonry jQuery

( JavaScript: Vanilla Masonry)

:

Answer 2

float:left ul, , float:right .

: http://jsfiddle.net/Xdyhy/

Answer 3

div float, div . div .

, div, div .

Answer 4

clear: both ul

ul { 
        float:left;
        margin: 0 20px 20px 0;
        padding: 0;
        width: 200px; 
        clear:both;
    }

.