Question

I have a simple form…

<label>name</label><input type="text" id="name">
<label>email address</label><input type="text" id="email">

Here is the CSS so far; the input elements line up vertically, as desired.

<div>
    <label>name</label>
    <input type="text" id="name">
</div>
<div>
    <label>email address</label>
    <input type="text" id="email">
</div>

div
{
    padding: 5px;    
}
label
{
    display: block;
    width: 100px;
    float: left;
}

see fiddle here

The problem is that I want my form centered on the page. How can I center with floated elements (or alternatively how to align without floating)?

Must work in all browsers, IE6 included.

Answer 1

See updated Fiddle here: http://jsfiddle.net/XpjYJ/7/

I placed your html inside a div. I then gave the div a fixed width, and set the margin to margin: 0 auto;