CSS for Aligning TextBox and Label

Question

I'm trying to take my Form layout away from tables and entering the world of div's and css.

I'm having difficulty though in my layout. I'd like to order the elements where a label is positioned directly above an input. Here's what it currently looks like:

I'd like the District Label and Textbox to be vertically aligned, but they seem to be forming a stair pattern.

Here's the css:

#content
{
    position: absolute;
    top: 110px;
    left: 350px;
    width: 775px;
    height: 605px;

}

#content label
{
    display:inline;
    margin-right:4px;
    vertical-align:top;
}

#content input
{
    float:left;
    margin:1px 20px 1px 1px;
}

and the HTML:

<div id="content">
        <label for="txt_RequestId">Request Id</label>
        <input id="txt_RequestId" type="text" />

        <label for="txt_District">District</label>
        <input id="txt_District" type="text" />
</div>

Answer 1

nest the input elements in the labels so the text label and field are grouped.

this usage is specified in the HTML4 spec:

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.

<div id="content">
    <label>
        Request Id<br />
        <input id="txt_RequestId" type="text" />
    </label>

    <label>
        District<br />
        <input id="txt_District" type="text" />
    </label>
</div>

CSS:

#content
{
    position: absolute;
    top: 110px;
    left: 350px;
    width: 775px;
    height: 605px;
}

#content label
{
    display:inline;
    float:left;
    margin-right:4px;
    vertical-align:top;
}

example

Then apply display:inline and float:left to the <label>s (or use display:inline-block instead if you don't have to worry about older browsers example)