Multi-column list in CSS

I’m trying to create a sort of columned list with just HTML and CSS. I have tried using floats, and inline-block, and it would seem as though inline-block is going to be my best bet, as I have the following requirements:

• The layout should be in columns;


• The number of columns should not be “preset”, but should be adaptive;


• The height of the columns must not be preset, but the width may be (if necessary).

The problem is that when the height of the list-items is not the same, you get gaps, whereas I want them to continue straight down.

I am using a structure something like this:

CSS

.columnlist li {
    display:inline-block;
    vertical-align:top;
}

HTML

<ul class=’columnlist’>
    <Li><H6>List 1 of 4</H3>
    <UL><LI>List item 1</LI>
        <LI>2ND List Item</LI>
        <LI>Item in List 3</LI>
        <LI>Final Item</LI></UL></LI>
    <Li><H6>List 2 of 4</H3>
    <UL><LI>Penultimate LI</LI>
        <LI>Final Constituant</LI></UL></LI>
    <Li><H6>List 3 of 4</H3>
    <UL><LI>Opening  Movement</LI>
        <LI>Closing  Component</LI></UL></LI>
    <Li><H6>List 4 of 4</H3>
    <UL><LI>Original Child</LI>
        <LI>2nd Element</LI>
        <LI>Then the 3rd</LI>
        <LI>And Last But Not Least</LI></UL></LI>
</UL>

Is there any way of removing the vertical space around the elements with CSS?

Note: I think something like this might work, but are there any other ways of doing such a thing? Multi-column CSS lists