positon() does not work when div contains multiple spans

[JVerstry]

Following a question I asked on StackOverflow (​http://stackoverflow.com/questions/7922023/jquery-ui-position-issue-with-a-div-within-a-div-containing-spans), it seems like there is a bug in the position() method when trying to position a div containing spans, within another div.

If each spans is not followed by a <br /> (except for the last one), the position() method does not work. There is no error message thrown by FireBug and I a could not find any documentation related to this. Setting a value for collision does not help.

The SO question contains screenshots and code samples.

[JVerstry]

I have create a code example at: ​http://jsfiddle.net/bHssw/.

In this example, even if I add a <br /> after each span, it does not solve the issue.

[JVerstry]

After discussions in the SO question, someone found out that the enclosing div MUST have an explicit height or width. This is not mentioned in the documentation.

[Scott González]

That's because your elements are all floated, so they don't have the dimensions that you think they have.