Misplaced paragraph after floating divs 2

Where should this <p> tag end up?

[mrtwice99]

I have created a form layout in css. I am using a div class for rows and inside that a span class floated left as a label and floated divs after it to create "groupings" to the right of the label. These divs allow me to put several <input> tags to the right of the first label span but with individual <label> tags underneath the input tags. This simulates a table-like design.

The form works pretty well, except that, when viewed in netscape or mozilla, if the grouped divs are the last "element" in the form, the first paragraph placed ouside the form appears to the right of the last floated div, instead of below the form with correct spacing. This happens even though there is the closing tag of the row div and closing tag of the form before the paragraph tag.

What gives? I know that this problem can be solved in mozilla by placing a clear:left on the <p>, but I would like to know why this happend. Thank you.

[photon]

This is the same type of problem as this one [webmasterworld.com].

Mozilla gets it right. When you float an element, the elements following it are supposed to "wrap" around it. Think of a floated image with the text flowing around it. So your final paragraph stays to the right of the floated elements.

Adding the

clear:left;

tells the cleared element not to wrap, but to drop down below the floated element(s).