css alignment question

Question

I'm having trouble with getting unordered lists aligned how I want them to. Here's an image of what I'm looking to achieve. How can I get it to look like the version on the right?

I will have between 1 and 6 unordered lists depending on the page, so I need a generic solution. Here's a stripped down version of the css and html 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

float:left the ul you want in left, and float:right the ul you want at right.

Example: http://jsfiddle.net/Xdyhy/

Answer 2

I don't know of a pure CSS technique which can handle this generically.

I've given up and used a jQuery plugin to do this in the past for something similar:

jQuery Masonry

(There's also a raw JavaScript version: Vanilla Masonry)

A picture is worth a thousand words:

Answer 3

Try putting the two left lists in a div and float that div left. Then float the remaining div right.

You will have to wrap them all in one containing div otherwise the rightmost div will fly off to the edge of the page.

Answer 4

use clear:both in ul

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

see here