Positioning Labels And Inputs With CSS

Answer 1

What about this?

div {
    /* either */ margin-left: 110px;
    /* or */     float: left;
}

Answer 2

This works on my machine, tested on IE8 and Firefox (the only browser I care about)

label {
    clear:left;
    float:left;
    margin-right:10px;
    text-align:right;
    width:100px;
    border:solid 1px;
}
input {
    float:left;
    border:solid 1px;
}
div {
    float:left;
    border:solid 1px;
}

And the HTML code :

    <label>x</label><input type="text" />
    <label>x</label><input type="text" />
    <label>x</label><input type="text" />
    <label>x</label><input type="text" />
    <label>x</label>
    <div>
        <label>y</label><input type="text" />
        <label>y</label><input type="text" />
        <label>y</label><input type="text" />

    </div>

Answer 3

Floating elements causes them to be rendered as block boxes and forces nonfloats to flow around them. The div is a block level element and by default it's clear is set to none so it renders on the same line as your first floated element and grows to consume the whole line but the label elements inside the div are set to clear left so they clear all of the label/input elements and are rendered underneath it.

By setting the div element to float like the input, it will be rendered as a block box inline with the other floats.

Change:

input {
    float:left;
}

to:

input, div {
    float:left;
}