Float unordered lists (UL) next to one another, and stack them at the bottom of each other, with no margins or spaces

Question

I have multiple unordered lists (UL) elements. Please check the image below:

Answer 1

Well, this solution may not specifically answer your question but it may help you fix your problem:

You won't be able to do this using float in the way you propose. The only solution I can think of would be to divide the elements into grouping DIVs (or your block element of choice) which are floated left. Essentially, you put each UL which belongs on the same Y-Axis into a column element of some sort:

I know this isn't completely semantic because you're adding elements purely for presentational purposes however I don't see any other way to achieve this (unless you are able to use absolute/relative positioning - which might be feasible if you know the number of items in each list).

Alternatively, there's probably a jQuery plugin or something along those lines which would allow you to position the elements dynamically but I don't know off the top of my head.