Question

Here’s some sample code

<label for="input1">input1</label>
<input id="input1" name="input1" type="text" required>
<label for="input2">input2</label>
<input id="input2" name="input2" type="date">

Currently, it displays like this:

Label Label Input Input

I want it do do this:

Label Input Label Input

Any ideas? Do I need to provide more code?

CSS

label { cursor: pointer; width: 250px; display: block; float: left; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

Answer 1

So, with your updated question it’s pretty simple to solve. When you use float on an element, it’s taken out of the normal positioning of inline elements. This means, that the labels have like a higher priority to be on the left side. That’s why you get this output: label, label, input, input. When you also add float to the input fields, the original order is restored. Or, when only using inline– or inline-block-elements, you can build a lot without the need of floating elements. So in your case, you could also simply change this:

label {
    […]
    display: block;
    float:   left;
}

to this:

label {
    […]
    display: inline-block;
}