Question

I have a set of <li> elements in an unordered list. The items are all floated left, with a bit of space between them. Problem is, the last list item is wrapped (isn’t at the end of the list, but leftmost on a new line). I have no idea why. The rendering is fine with Mac Safari and with IE 7.

The CSS for the li items floats them left:

list-style: none;
float: left;
padding: 1px 1px 0 1px;
margin-right: 1px;
border: 1px solid #2A3139;  /* to hold space for hover border */

Another factoid: the unordered list is in a div (for clipping purposes; the list is scrolled horizontally); the CSS for the <ul> specifies:

overflow: none;
position: relative;

(though I don’t think this is related to the problem… but one never knows)

Answer 1

Is the width of your container div wide enough to accommodate the width of all your li elements PLUS their margins and borders? If not, the floats will wrap to the next line if there is not enough space.