I am trying to create a horizontal text navigation at the bottom of a page. All of the links are in a list. (This can not be helped, it is a joomla based site. it is either they are in a list or in a table /chringes.)

I have managed to get the list to display horizontally, now the trick is how can I force it to break to a new line once it reaches its width?

This is the snippet of CSS:

ul#mainlevel-bottom
{
    width: 980px;
}

ul#mainlevel-bottom li
{
    display: inline;
    position: relative;
    background-image: none;
    padding-left: 4px;
    padding-right: 4px;
    margin: 0;
    white-space: pre;
    border-right: 1px solid #FFF;
}

ul#mainlevel-bottom li a
{
    text-decoration: none;
    font-size: .8em;
    color: #FFF;
}

ul#mainlevel-bottom li a:hover
{
    text-decoration: none;
    font-size: .8em;
    color: #ff0066;
}

Here is the live site: http://www.partyparadiserental.com

Float the list and put it in a container with a defined width.

Thanks, that did the trick. Now my next problem, I can't seem to get the text to center align. I tried to do text-aligns on everything from the ul element to the li, to the div. Any help would be appreciated.

I am off to find some aspirin.

EDIT: I was able to make the first row align to the center, but the second row doesn't align.