Float unordered lists (UL) next to one another, an

Question

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

what I want to do is float the ULs next to each other. The ULs have different lenghts of content (LIs), therefore some UL are longer than other. When I float ULs next to each other in a limited width div layer, at some point the last ULs float at the bottom / left. However... if there's a UL that is longer there will be some space. I wish the ULs to float left and to stack to each other, at the bottom of each UL element, without spaces. Is there a way to achieve this with HTML/CSS?

floating ULs left of each other is easy... but I don't know how to get rid of the margin

----- UPDATE ----

this is the code I use to generate the HTML... actually I changed it from ULs to TABLEs but it doesn't change my problem. I have a number of TABLEs which may vary from 1 to 8. The width of the container DIV where these tables will appear can host up to 4 columns. The TABLEs will have different amounts of ROWs therefore will differ in lengths.

$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>';
}

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:

<div class="col">
    <ul><!-- LI elements here --></ul>
    <ul><!-- LI elements here --></ul>
</div>

<div class="col">
    <ul><!-- LI elements here --></ul>
    <ul><!-- LI elements here --></ul>
</div>

<div class="col">
    <ul><!-- LI elements here --></ul>
</div>

<div class="col">
    <ul><!-- LI elements here --></ul>
</div>

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.

Answer 2

Although advices and suggestion given were indeed helpful,

I solved the problem with jQuery Masonry, a jQuery plugin

http://masonry.desandro.com/

I'm not sure whether there are better ways to do it, but this one just worked

Isotope, another jQuery plugin that looks similar to Masonry, could probably do the same job as Masonry but I haven't tested yet: http://isotope.metafizzy.co/

thanks for reading and dropping by

Answer 3

That would be possible if you stacked them vertically. This jsfiddle here illustrates your problem, the next row of items will start off where the longest ul reaches in the previous row. Instead of creating new columns for the new row, you could insert the ul's back into the original columns to stack the ul's vertically. Take a look at this jsfiddle to see the difference.

Sorry, don't know if you can reach those links. jsfiddle.net seems to be under heavy load right now.