Technote Details :: Drag and Drop ordering does not work in Firefox when the draggable items are floating

I apply the AJAX Drag and Drop Ordering wizard to reorder records from a database table. I want items to be displayed horizontally and not vertically (as they are by default). For this, I add style="float: left;" inside the opening <li> tag (list item).

When I try the drag and drop ordering in Firefox now, it doesn't work - items are not "completely dropped".

This happens because the height of the div container (that includes both the heading 3 title and the unordered list) is not automatically enlarged in Firefox. Due to this fact, the drag and drop operation cannot work.

In Internet Explorer, the div container height expands according to the content inside. This behavior is in opposition with the CSS standard. The Firefox browser respects the standard, and when there are floating items, the container's height shrinks. So there is not enough room for the drag and drop ordering to take place.

Two changes are required to fix this issue in Firefox:

1. Add class="clearfix" inside the opening <ul> tag (unordered list).
2. Add a new code line after the </ul> closing tag, namely: <br style="clear: both;">.
   Note: W3C suggests including a "cleared" element in the div container, at the end. This will force the container to enclose that cleared element. Read more about floating problems here.

Now that the div container height is expanded, the drag and drop ordering will work as expected in Firefox too. 

Note: If you use the AJAX Drag and Drop Wizard for both classifying and ordering, solve the Firefox problem by following the same logic as above. There are two unordered lists (for categories and for items). You need to edit the one for items.