Add space between fields using label float left

[Noppy]

Hi,
probably something really simple i’m missing here but i am trying to have my form laid out nicely so the label sits on the same line as the input and the one below matches the above.

html is

<label for="password">New password</label> <input type="password" name='password'/><br />
<label for="repassword">Re-type new password</label> <input type="password" name="repassword" /><br />
<input type="submit" id="submit" value="reset password" />

css is

#resetform label{
display:block;
width:15em;
float:left;
margin-right:20px;
}

this works but the lines are close together if i add margin-bottom:10px; or padding-bottom:10px then it all goes screwy.
what am i missing. I am hoping not to have to add any more things into the code like which i’ve seen on some examples as i’m assuming it can be done without.

thanks

[RyanReese]

What do you mean, it goes screwy? What does not work about it? Can you throw together a codepen example?

[Noppy]

Hi,

never used codepen so hope this is correct

you should see that with the margin-bottom added it shifts the second line across so it starts under the input above. I assume it is aligning to the end of the label block above.

[Erik_J]

Can’t see the codepen (can’t even register a new codepen account or reset the old without error)
So I made a JsFiddle instead, is this what you are trying?

[RyanReese]

Your main issue was that the input submit needs to be cleared from the above floats. Otherwise, you’ll hit a float snag, as you did.

Aside from that, that submit should be wrapped in a label as well .

[Noppy]

ah thanks guys knew it would be something simple doh! will give it a try