4

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:

enter image description here

What have I missed?

0

2 Answers 2

5

Because you did not float your inputs left.

Change #new-thing input to be:

#new-thing input {
    float: left;
    width: 250px;
    margin-bottom: .5em;
    }

See here

2
  • Good catch. Was about to post the same thing.
    – Wex
    Sep 7, 2012 at 6:05
  • slaps head! Thanks Erics that's fabulous.
    – Dave Sag
    Sep 7, 2012 at 8:27
-1

Try this one:

<!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>
      <table>
        <tr>
            <td><label for='name'>Thing Name:</label></td>
            <td><input id='name' /></td>
        </tr>

        <tr>
            <td><label for='first-thing'>First:</label></td>
            <td><input id='first-thing' style='width:6em;' /></td>
        </tr>

        <tr>
            <td><label for='second-thing'>Second:</label></td>
            <td><input id='second-thing' style='width:6em;' /></td>
        </tr>

        </table>
  </form>
</div>
</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.