Question

I have a html form that is basically vertical but i really have no idea how to make two text fields on the same line. For example the following form below i want the First and Last name on the same line rather then one below the other.

    <form action="/users" method="post"><div style="margin:0;padding:0">


            <div>
                <label for="username">First Name</label>
                <input id="user_first_name" name="user[first_name]" size="30" type="text" />

            </div>

            <div>
                <label for="name">Last Name</label>
                <input id="user_last_name" name="user[last_name]" size="30" type="text" />
            </div>
            <div>
                <label for="email">Email</label>
                <input id="user_email" name="user[email]" size="30" type="text" />
            </div>
            <div>
                <label for="pass1">Password</label>
                <input id="user_password" name="user[password]" size="30" type="password" />
            </div>
            <div>
                <label for="pass2">Confirm Password</label>

                <input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />

            </div>

Answer 1

The default display style for a div is “block.” This means that each new div will be under the prior one.

You can:

Override the flow style by using float as @Sarfraz suggests.

or

Change your html to use something other than divs for elements you want on the same line. I suggest that you just leave out the divs for the “last_name” field

<form action="/users" method="post"><div style="margin:0;padding:0">
  <div>
    <label for="username">First Name</label>
    <input id="user_first_name" name="user[first_name]" size="30" type="text" />

    <label for="name">Last Name</label>
    <input id="user_last_name" name="user[last_name]" size="30" type="text" />
  </div>
  ... rest is same