I have a list of words in javascript similar to this:

var words = ["mine", "minute", "mist", "mixed", "money", "monkey", "month",
             "moon", "morning", "mother", "motion", "mountain", "mouth", "move",
             "much", "muscle", "music", "nail", "name", "narrow", "nation",
             "natural", "near", "necessary", "neck", "need", "needle", "nerve",
             "net", "new", "news", "night"];

The words can be 1-25? letters long.

I have a div id="words", with a set width of 700px (but I might change it from this).

Using css/javascript/jquery, how can I make it:

• Order the words by number of letters
• Place the words inside the div tag, left to right, but so that there are no gaps at the right edge of the words div, and there is even spacing between words on a line.
• Each word should have a border around it and a background.

Like this:

|reallylongwordssdf     shorterwordfdf     dfsdfsdfsdf     sdfsdfsdf|
|sdfsdfsdf   sdffsdop   sdfjpogs   sdfsds   dfsdsd   dfsdsd   dfsdsd|

I really have no idea where to begin with this. Perhaps I could manage to write code to order the words by number of letters, but after that, I'd be stuck.

Edit: I forgot to add, the words must be links.