Question

How do I correct the following E-mail textbox alignment: ?

To make it look like this:

I know I can use tables, but how do I solve this problem without using tables? CSS maybe?

HTML:

<form action="" name="contactform" method="post">
<p></p>
First name: <input type="text" class="contact" name="contactfirstname" value="">
<br/>
Last name: <input type="text" class="contact" name="contactlastname" value="">
<br/>
E-mail: <input type="text" class="contact" name="email" value="">
<p></p>

Answer 1

The most minimalized version I could think of…

<form>
    <label>First Name: <input type="text" name="firstName"></label>
    <label>Last Name: <input type="text" name="lastName"></label>
    <label>Email Address: <input type="email" name="emailAddress"></label>
</form>​

and

form {
    width: 300px;
}
label {
    display: block;
    margin: 5px;
    padding: 5px;
    clear: both;
}
label input {
    float: right;
}​

---

Since OP has edited his question to include his markup, I’ll expand the answer.

Some Points of Improvement:

• Remove the empty <p> element, and the <br/> elements. They have no value inside a form.
• Use <label>s, that’s what they were made for. You can wrap the label and the input inside of the <label> tag, or you can use <label for="element_id">Label</label><input id="element_id">.
• Be consistent. If you decided to go with the <br /> type of format for singular tags, stick with it to the <input />s as well.
• Use correct input types for specific inputs, there is type="email" for the email field, which will optionally have the browser check for you if it’s a valid email address or not!.
• Use CSS for design and layout, not <p>s and <br>s.

Good luck!