Form formatting - center form and align its fields to the left

Question

I am trying to center a form, and to align to the left some fields inside of it. Any time I align them to the left- they are not in the center of the webpage, and anytime I center the form, they are not aligned to the left anymore. I have checkbox fields. How should I go about this? div? table? other?

Here's the jsFiddle code: http://jsfiddle.net/lucyw/FN5BH/13/

Thanks!

Solution

I've provided below a pretty standard way of achieving your desired end result:

HTML

<div class="container">
  <form>
    <label>foo</label>
    <input type="text" name="foo"/>
    <label>fooo</label>
    <input type="text" name="fooo"/>
    <label>foooo</label>
    <input type="text" name="foooo"/>
  </form>
</div> 

CSS

.container   { width:300px; background-color:#222; overflow:hidden;
               padding:10px; }
form         { color:#FEFEFE; width:250px; margin:0 auto;
               background-color:#F62; }
label, input { float:left; }
label        { clear:left; display:block; width:60px; }

http://jsfiddle.net/JQttx/3/