CSS :before float itself floats

Question

I have markup something like:

<label/><input/><label/><input/>

And want to float the labels to the left of the inputs with a width on the labels. If the label text wraps, I would like it to push down the next label and input.

The solution I am trying to use runs like this

label { float: left; clear: left; width: 25% }
label:before { content: " "; display: block; float: none; clear: left; }

However this does not work. In fact, if I replace the " " with "a" I can see that the generated content in the :before is acting like it is float:left, even with the float:none on there!

EDIT I'm mostly trying to understand why the above CSS behaves the way it does. Any pure-CSS solutions would be cool as well, but I'm not looking to style by changing markup :)

A demonstration of the problem is at https://singpolyma.net/so-5080542.html you can see the red "see here" text is floating to the left with the label, instead of clearing everything and being on a line by itself like I would expect.

Any ideas?

Solution

Here my solution. It's almost because of your input that has a block property. Make it float:left and it seems to work as you expected. Is that it ?

Comments

[thirtydot]

Could you demonstrate the problem on jsFiddle?

[kans]

What styles should go on label and input to work with this? In my tests, it behaves no different than my original code that did not work.