Left floated list

I want to float lists (DL) left, like the image at the bottom of this post.

If i use this:

dl {
    float: left;
    margin-bottom: 25px;
    vertical-align: top;开发者_如何学编程
    width: 50%;
}

...Then the lists, that a shorter than the long one, will be placed at the bottom of the long one. They will not continue after the above list.

Can any of you guys tell me what i'm doing wrong??

Thank you in advance... :-)

What you want is probably not possible with floats. AFAIK there are JavaScript solutions to this, however I can't seem to find them right now.

One thing you could try, if you don't mind not supporting IE is CSS columms. Drop your rule and use following instead

#parentElement { /* selector to the parent of your dl's */
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
}