Tenho vários elementos de listas não ordenadas (UL). Por favor, verifique a imagem abaixo:

O que eu quero fazer é flutuar os ULs um ao lado do outro. Os ULs têm diferentes comprimentos de conteúdo (LIs); portanto, alguns ULs são mais longos que outros. Quando flutuo os ULs próximos um do outro em uma camada div de largura limitada, em algum momento os últimos ULs flutuam na parte inferior / esquerda. No entanto ... se houver um UL mais longo, haverá algum espaço. Desejo que os ULs flutuem para a esquerda e parapilh um ao outro, na parte inferior de cada elemento UL, sem espaços. Existe uma maneira de conseguir isso com HTML / CSS?

ULs flutuantes deixados um do outro é fácil ... mas não sei como me livrar da margem

----- UPDATE ----

Este é o código que eu uso para gerar o HTML ... na verdade, eu mudei de ULs para TABLEs, mas isso não muda meu problema. Eu tenho um número de TABLEs que podem variar de 1 a 8. A largura do DIV do contêiner onde essas tabelas aparecerão pode hospedar até 4 colunas. Os TABLEs terão diferentes quantidades de ROWs e, portanto, diferirão em comprimento

$groups = array();
foreach ($related->posts as $post) {
    $groups[$post->post_type][] = $post;
}
foreach ($groups as $name => $posts) {
    printf('<table class="related-group related-%s "><tbody>', htmlspecialchars($name));
    foreach ($posts as $post) {
        printf('<tr class="related-item"><td><a href="'.get_permalink($post->ID).'" rel="permalink">'.get_the_post_thumbnail($post->id, '32').'</a></td><td><a href="'.get_permalink($post->ID).'" rel="permalink">'.$post->post_title.'</a></td></tr>');
    }
echo '</tbody></table>';
}