How do i make a list <li> display freely instead of down?

On my site hiphopcan开发者_C百科vass.com I added the blogroll in the footer. I want the height to be a certain size, right now its on auto. If the content of the blogroll gets to that height then it will display on the other side until its fully across. What i want can be seen in the image below.

I do something like this in the footer of my site to display my categories (although I'm only displaying them in two short columns).

To do this, I'm using the following CSS to manipulate the list elements:

#footer ul li.footercolumn{float: left; display: block; width: 210px; margin-right: 20px;}

#footer ul li.footercolumn ul li { float: left; width: 50%; margin-bottom:10px; }

(This will have to be customized to fit your application of course).

There are several ways to create multiple columns using CSS, I'd recommend checking out CSS Wizardry's and A List Apart's articles on this subject.

You need to float the <li> left and change the height of the footerwidget from auto to 50px