CODEWITHSUNDEEP
csshtml-lists
Evgeny Tryastsin
Evgeny Tryastsin

Reputation: 733

unordered list items with float:left do not float properly

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!

Upvotes: 2

Views: 11180

Answers (2)

Mr. Alien
Mr. Alien

Reputation: 157404

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;
}

Upvotes: 7

box86rowh
box86rowh

Reputation: 3415

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!

Upvotes: 4

Related Questions