Simple CSS form layout - css

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?

Answer 1

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