unordered list items with float:left do not float properly

Question

Any help is sincerely appreciated. For some reason in my unordered list, two last items do not float as expected. you can see it at zenmonyDOTcom/immune-support-c30/ Here is the layout:

ul.categories-list {
    width: 620px;
    padding: 30px 0 10px 60px;
    float: left;
    min-height:425px;
    background: url(/images/categories_bkgrnd_main.png) no-repeat;
    list-style:none;
    text-align: center;
}

.categories-list li {
    position:relative;
    margin:5px;
    float:left;
    display: block;
    }

Is it because the items are not cleared properly? Thank you!

Answer 1

Remove float: left; from ul.categories-list and also modify padding as 30px 0 10px 0

and add display: inline-block; to .categories-list li and remove float: left; too

.categories-list li {
    position:relative;
    margin:5px;
    display: inline-block;
}

Answer 2

Your heights are not consistent, one of the images is 195px high, while the rest seem to be 194px, if you make them all the same, you should be all set!