1186839 - floating block and input having style display block positioning problem

Status: RESOLVED DUPLICATE of bug 952981

(Core :: Layout: Block and Inline, defect)

Description

[max]

Attachment: HTML with embedded CSS

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:39.0) Gecko/20100101 Firefox/39.0
Build ID: 20150629114836

Steps to reproduce:

With a specific CSS an input element may be incorrectly positioned
if it is preceded by a floating block. The attached file demonstrates
the problem. I suppose the markup and the CSS as quite strange
but they are a simplified variant of a real page.

Consider repeating div elements containing the following tags:

1. Some block element having "width: 100%; floating: left;" style
2. input element that have "display: block". I did not manage
    to reproduce the bug with span or div element having various
    display styles. Img elements behave like input fields,
    so the problem may be related to the absence of the closing tag.


Actual results:

Input elements are placed behind the right border of the browser window
and horizontal scrollbar appears.


Expected results:

Since label occupy full window width,
the input elements should appear below labels,
not at the right of them.
So all elements should be visible without scrolling.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Thank you for the bug report, and the clear testcase and steps to reproduce!  This is a known problem with block-level replaced elements...

A possible workaround is to use "clear" on the replaced element (the <input>), if that's possible in the context of the original page.