2

I am trying to place two input forms next to eachother and position some text underneath them. Somehow it never ends up aligned correctly. This picture shows what I am trying to do:

Example picture

HTML:

<form action="#" class="cleanForm" method="POST">
    <fieldset>
        <input type="text" name="firstname" placeholder="first name" required>
        <em>Please enter your first name</em>

        <input type="text" name="lastname" placeholder="last name" required>
        <em>Enter your last name</em>

        <input type="email" name="email"  placeholder="e-mail" required>
        <em>Enter your e-mail address</em>

        <input type="email" name="email2" placeholder="re-enter e-mail" required>
        <em>Re-enter your e-mail address</em>

        <input type="password" name="password" placeholder="password" required>
        <em>Enter a password between 8 and 20 digits</em>

        <input type="password" name="password2" placeholder="re-enter password" required />
        <em>Re-enter the password</em>

        <p>
            <input type="radio" name="gender" value="Female" checked>
            <label for="female">Female</label>

            <input type="radio" name="gender" value="Male">
            <label for="male">Male</label>
        </p>

        <p>
            <input type="checkbox" id="agree-TOS">
            <label for="agree-TOS">I have read and agree to the <a href="#">Terms of Service</a>.</label>
        </p>

        <input type="submit" value="Create account">
    </fieldset>
</form>

CSS:

form.cleanForm {
    width:700px;
    margin:0 auto;
}

form.cleanForm p {
    margin-bottom:15px;
}

input[type="email"], input[type="password"], input[type="text"]  {
    font-family: Arial, Sans-Serif;
    font-size: 18px;
    color: #adadad;
    padding: 10px;
    outline:none;   
    float:left;
    border: solid 1px #adadad;
    width: 230px;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow:inset 0 0 5px 5px #E6E6E6;
    -webkit-box-shadow:inset 0 0 5px 5px #E6E6E6;
    box-shadow:inset 0 0 5px 5px #E6E6E6;
    clear: right;
}

input[type="email"]:focus, input[type="email"]:hover, input[type="password"]:focus,
input[type="password"]:hover, input[type="text"]:focus, input[type="text"]:hover {
    border:1px solid #FF003F;   
} 
form.cleanForm em {
    font-size:12px;
}
NGLN
  • 43,011
  • 8
  • 105
  • 200
lean13
  • 23
  • 1
  • 1
  • 4
  • First of all, you have an extra `"` in the "Enter your last name" ``. Second, the code you provided looks nothing like what you're trying to do. I realize that that's the problem, but you don't accidentally end up with perfect inline labels while trying to accomplish your screenshot. – Ayman Safadi Dec 25 '11 at 14:08
  • Do you want to get rid of the inline labels in favor of regular labels under the fields? If so, have you tried doing this on your own yet? – Ayman Safadi Dec 25 '11 at 14:10
  • 1
    That EM's should be a LABEL's instead... – Šime Vidas Dec 25 '11 at 14:10
  • "Female" is preselected? That's discrimination!! `:P` – Šime Vidas Dec 25 '11 at 14:12
  • 1
    All those form fields should be in paragraphs. If some of them are, all should be (for consistency). – Šime Vidas Dec 25 '11 at 14:13

4 Answers4

3

You're applying float:left to the <input>s, but not to the <em>s. That's why all the fields are pushed to the left, while the labels remain in the ordinary page flow.

One possible solution is wrapping both of them in a <div> and applying the float to that:

HTML:

<div class="field">
    <input type="text" name="firstname" placeholder="first name" required />
    <em>Please enter your first name</em>
</di>

CSS:

div.field {
    float: left;
}

Also, it would be more sematically correct to use a <label> instead of an <em>.

Peter-Paul van Gemerden
  • 6,921
  • 30
  • 37
2

I think your markup needs a redo. Use <label>s to describe form element labels, not <em>s. There's no semantic value in the emphasis. Also, you can use the labels themselves to align the form easily. Here's my code (Live Example Here):

HTML

<form action="#" class="cleanForm" method="POST">
    <fieldset>
        <label><input type="text" name="firstname" placeholder="first name" required>
        Please enter your first name</label>

        <label><input type="text" name="lastname" placeholder="last name" required>
        Enter your last name</label>

        <label><input type="email" name="email"  placeholder="e-mail" required>
        Enter your e-mail address</label>

        <label><input type="email" name="email2" placeholder="re-enter e-mail" required>
        Re-enter your e-mail address</label>

        <label><input type="password" name="password" placeholder="password" required>
        Enter a password between 8 and 20 digits</label>

        <label><input type="password" name="password2" placeholder="re-enter password" required>
        Re-enter the password</label>

        <div id="gender">
            <label><input type="radio" name="gender" value="Female" checked>
            Female</label>

            <label><input type="radio" name="gender" value="Male">
            Male</label>
        </div>

        <label class="tos"><input type="checkbox" id="agree-TOS">
        I have read and agree to the <a href="#">Terms of Service</a>.</label>
    </fieldset>
    <button type="submit">Create account</button>
</form>

CSS

.cleanForm {
    width: 550px;
}

fieldset > label > input {
    display: block;
}
input[type="checkbox"] {
    display: inline;
}
label {
    margin: 10px;
    padding: 5px;
}
fieldset > label {
    float: left;
    width: 200px;
}
label:nth-child(2n+1) {
    clear: both;
}
#gender, .tos, button {
    clear: both;
}
.tos {
    width: 400px;
}

input[type="text"], input[type="email"], input[type="password"] {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
    box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);

    padding: 5px;
}
Hunsu
  • 3,281
  • 7
  • 29
  • 64
Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
  • I'm not a fan of wrapping ` – Abhi Beckert Dec 25 '11 at 20:08
  • Correct me if I'm wrong, my CSS is clearer then the OP's. Also, if you have the label next to the input, there's no reason to not do it this way. (If the label for some reason is places in a different part of the label, or you're using some sort of JavaScript to hide/show the element on label click etc, then it's understandable. Note that this approach is per specs. – Madara's Ghost Dec 26 '11 at 08:20
  • I realise it's per the specs and works fine, I've just found from experience it causes problems. I prefer to have a tag wrapped around *just* the label and nothing else, especially if the design changes in future. In general, I prefer to avoid avoids things like `display: block;` on the input... you could make the label block instead. – Abhi Beckert Dec 26 '11 at 22:56
  • thx very much and sorry for the late reply. this has helped me a lot and the explanation and live preview were also great! couldnt think of a better answer :) THANKS AGAIN!!! – lean13 Dec 29 '11 at 19:43
  • @lean13 If you think my answer is correct please upvote and accept it as correct. See the [FAQ#howtoask] to see how to do that. Thanks :) – Madara's Ghost Dec 29 '11 at 19:46
  • 1
    i accepted it but it wont let me upvote because my rep is too low :( thx again though! i love u (no homo) haha – lean13 Jan 03 '12 at 14:00
0

You may try this:

HTML

<form action="#" class="cleanForm" method="POST">

        <fieldset>

<div class="column">
            <input type="text" name="firstname" placeholder="first name" required />
            <em>Please enter your first name</em>
            </div>
            <div class="column last">

            <input type="text" name="lastname" placeholder="last name" required />
            <em>Enter your last name</em>

</div>
<div class="column">
            <input type="email" name="email"  placeholder="e-mail" required />
            <em>Enter your e-mail address</em>
            </div>
<div class="column last">
            <input type="email" name="email2" placeholder="re-enter e-mail" required />
            <em>Re-enter your e-mail address</em>
            </div>
<div class="column">

            <input type="password" name="password" placeholder="password" required />
            <em>Enter a password between 8 and 20 digits</em>
            </div>
<div class="column last">


            <input type="password" name="password2" placeholder="re-enter password" required /><br />
            <em>Re-enter the password</em>
            </div>

        <p style="clear:both;">
            <input type="radio" name="gender" value="Female" checked />
            <label for="female">Female</label>

            <input type="radio" name="gender" value="Male" />
            <label for="male">Male</label>
        </p>

        <p>
            <input type="checkbox" id="agree-TOS" />
            <label for="agree-TOS">I have read and agree to the <a href="#">Terms of Service</a>.</label>
        </p>

        <input type="submit" value="Create account" />




        </fieldset>

        </form>

CSS

form.cleanForm {
width:700px;
margin:0 auto;
}
form.cleanForm p {
margin-bottom:15px;
}
input[type="email"], input[type="password"], input[type="text"]  {
font-family: Arial, Sans-Serif;
font-size: 18px;
color: #adadad;
padding: 10px;
outline:none;   
float:left;
border: solid 1px #adadad;
width: 230px;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow:inset 0 0 5px 5px #E6E6E6;
-webkit-box-shadow:inset 0 0 5px 5px #E6E6E6;
box-shadow:inset 0 0 5px 5px #E6E6E6;
clear: right;
}

input[type="email"]:focus, input[type="email"]:hover, input[type="password"]:focus,        input[type="password"]:hover, input[type="text"]:focus, input[type="text"]:hover {
border:1px solid #FF003F;   
}
form.cleanForm em {
font-size:12px;

}
.column{
 width:250px;
 float:left;
 margin-right:20px;
 padding: 10px;   
}
.last{
 margin:0;
 padding: 10px;   
}

Output

Sajib Mahmood
  • 3,382
  • 3
  • 37
  • 50
0

@PPvG's answer is very close, but not perfect:

  • In almost all cases, every <input> tag should have a matching <label> tag, and where you have used <em> is a perfect place for a label.
  • In this case, inline-block is more appropriate than float

Here's how I would do it:

HTML:

<div class="field">
    <input type="text" name="firstname" id="firstname_field" placeholder="first name" required />
    <label for="firstname_field">Please enter your first name</label>
</div>

CSS:

div.field {
  display: inline-block;
  width: 200px;
}

div.field label
{
  display: block;
}
Abhi Beckert
  • 32,787
  • 12
  • 83
  • 110