Simple CSS form layout

Question

i have this html structure:

<form id="signUpForm" action="login.php" method="post">
    <h3>Please enter your details below:</h3>
    <br />

    <p>Name: </p>
    <input id="name" name="name" type="text"></input>
    <br />

    <p>Email: </p>
    <input id="email" name="email" type="text"></input>
    <br />

    <p>Company: </p>
    <input id="company" name="company" type="text"></input>
    <br />

    <p id='required'>* All fields are required</p>

    <p>Enquiry Details</p>
    <textarea></textarea>

    <input id="signUpSubmit" type="submit" value="Send"></input>
</form>

This form is underneath a div element in the html but the div element has float: left on it, so the div and form sit side by side. The thing i want to do is have the 3 text inputs vertically, then have the textarea top right of the form. so the inputs and the textarea are then side by side?

Does that make sense?

Community · Accepted Answer · 2013-07-23 13:47:45Z

You need to make some adjustments to your markup, adding two divs for the left and right columns would make things far easier:

<form>
    <div class="left-column">
        <label for="name">Name: </label>
        <input id="name" name="name" type="text"/>

        <label for="email">Email: </label>
        <input id="email" name="email" type="text"/>

        <label for="company">Company: </label>
        <input id="company" name="company" type="text"/>
    </div>
    <div class="right-column">
        <label for="ta">Enquiry Details: </label>
        <textarea id="ta" name="ta"></textarea>
    </div>
</form>

Then using some simple CSS, you may create the two column effect:

form {
    position: relative;
}

form div.left-column {
    position: absolute;
    width: 50%;
    left: 0;
}

form div.right-column {
    position: absolute;
    width: 50%;
    right: 0;
}

Then using correct CSS styling on your inputs in order to allow them to display vertically without using <br /> tags in your markup:

form input, form label {
    float: left;
    clear: left;
}

Collectives™ on Stack Overflow

Simple CSS form layout

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related