Place HTML lists side by side

Question

I want to place a variable number of HTML lists side by side inside a fixed-sized <div> element like the following:

+--------------------------------+
| LIST 1     LIST 2     LIST 3   |
| - xxx      - xxx      - xxx    |
| - xxx      - xxx               |
|            - xxx               |     I need this line break –
|                                | <-- I don't want LIST 4 to be
| LIST 4                         |     directly beneath LIST 1!
| - xxx                          |
| - xxx                          |
+--------------------------------+

I floated the lists (float: left;) to get them positioned side by side but I don't know how to avoid that LIST 4 moves up as far as possible (until it is directly beneath LIST 1).

How do I get the vertical space between LIST 1 and LIST 4? Is there any way to use the clear property elegantly to solve this problem?

Answer 1

I haven't tried this, but I'd imagine that you could put a margin-bottom on the lists, then the fourth list should clear the longest of the first-row lists, plus the margin. But I haven't tried this, so I could well be wrong.

Answer 2

What you need to do is clear the left and right floats in between list 3 and list4.

Use the clear:both CSS property to, in effect, create a line break in between floated elements.

EDIT I attached jQuery to show you the most elegant way to dynamically produce the effect you are looking for.

<style type="text/css">
    ul {float:left;}
    .clear {clear:both;}
</style>

<script type="text/javascript" src="localjQuery.js"></script>

<script type="text/javascript">
 $('ul').last().prepend('<div class="clear"></div>')
</script>   

Answer 3

You might try putting lists 1 - 3 in their own div, and 4 within another, this way the two parents float underneath each other. Div positioning like this gets kind of funky, and I've encountered this kind of problem a lot. A different option would be to query the size of list 1 - 3 after the document is loaded, and set their heights to the same, maximum value so that list 4 would be positioned below them correctly.

Answer 4

Sorry. There is no simple CSS-only solution if the number of lists and the items in each list varies.