Aligning Divs in a sign up form - css

Question

I wanted to write HTML for a signup form that looks like the one at the following link:
https://www.hipchat.com/sign_up
The issue is, I want to use div tags, ul and li elements to create the form instead of HTML tables. I am having a hard time figuring out how to align the field instructions and the text box inputs using css classes.

Answer 1

you can try something like this:
<ul>
<li>
<label>Name:</label><input class="textbox" type="text" size="30" />
</li>
</ul>
and go on trying some css style, margin float .......

Answer 2

Why do you need to use DIVS and LI's?
Use labels and form elements.... Www.w3c.org will help

Answer 3

Here's something to get you started.

Answer 4

You would basically do something like this.. strip style from list and float them left.
You can also take out the margin:0 auto; if you don't want it centered.
.container {margin: 0 auto; width: 300px;}
.container ul {margin: 0; padding: 0; list-style: none; float: left; width: 50%;}
<div class="container">
<ul>
<li>name</li>
<li>email</li>
</ul>
<ul>
<li><input type="text" name="email" /></li>
<li><input type="text" name="email" /></li>
</ul>
</div>

Answer 5

<form method="post">
<div class="field">
<label for="name">name</label>
<input id="name" name="name" type="text" />
</div> <div class="field">
<label for="email">email</label>
<input id="email" name="email" type="text" />
</div> <div class="field">
<label for="job title">job title</label>
<input id="job title" name="job title" type="text" />
</div>
</form>
This is much better option use this , don't go for Ul-li use DIV
here is link http://jsfiddle.net/sahil20grover1988/JLbbw/