I'm building a simple web-form and one of my input fields simply won't dress to the left as supposed to but sits up to the right of the previous form field. I've reduced my form to a very simple text case.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<style>
#new-thing {
width: 450px;
}
#new-thing label {
clear: left;
float: left;
width: 120px;
font-weight: bold;
}
#new-thing input {
width: 250px;
margin-bottom: .5em;
}
</style>
</head>
<body>
<div id='new-thing'>
<form>
<label for='name'>Thing Name:</label>
<input id='name'>
<label for='first-thing'>First:</label>
<input id='first-thing' style='width:6em;'>
<label for='second-thing'>Second:</label>
<input id='second-thing' style='width:6em;'>
</form>
</div>
</body>
</html>
The second field is supposed to sit under the first, adjacent to the label 'Second:' but it sits to the right of the first field instead. See this screen snap:
What have I missed?