I've been trying to float a list so that it would collate to the right, to make it look like the items in navboxes that we usually see, like this one. Here's my CSS entry:

/* floatlist */
.floatlist ul {
    list-style-type: none !important;
    list-style-image: none !important;
    margin:0px !important;
    padding:0px !important;
}
.floatlist li {
    float:left;
    padding-right: 5px !important; 
}
.floatlist li:before { content: "• " }

The results turned out to be a bit odd. As you can see from this page and the screenshot some items do not return to the far left, but instead decided to run downwards (as it normally would.)

Is there a way to fix this? —mfaizsyahmi (talk) 03:00, May 1, 2012 (UTC)

You can replace float:left; with display:inline; - should give the same result but without the oddity. You also might want to consider not using lists in navboxes whatsoever and simply put the names in table cells separated with "•" - that's how I think most navboxes display their content. It would save you the trouble with adding the "•" through CSS. — Sovq 07:57, May 1, 2012 (UTC)

I find out that using "display:inline-block;" produces better results, as "display:inline;" will break the list on its white spaces. Thanks! —mfaizsyahmi (talk) 09:52, May 1, 2012 (UTC)

P.S. Why do I always ask for assistance for things that is 90% working?

Because it's always that 10% that takes 90% of our time — Sovq 16:24, May 1, 2012 (UTC)