Simple CSS form layout

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=开发者_Python百科'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?

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;
}