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: Screenshot

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>

Actually, I would recommend using tables for forms. The layout process is much easier, as you now know. — Evan Mulawski, Aug 09 '11 at 14:03
@Evan Really, seems like I've been reading all about the benefit of not using tables except for tabular data. Why do you recommend tables? — mint, Aug 09 '11 at 14:04
You could wrap the ``-tags with the ``-tags, display the labels as `inline-block` and give them a `width`. — Quasdunk, Aug 09 '11 at 14:06
@mint: Well, you can put form inputs on the same horizontal plane without floating divs or styling the individual inputs. — Evan Mulawski, Aug 09 '11 at 14:08

MikeM · Accepted Answer · 2011-08-09T14:16:40.283

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)

This works great, one question though, is it considered bad practice to use
; is there a better way or is this the generally accepted method. A CSS approach would be preferred. — mint, Aug 09 '11 at 14:18
true `
` is arguably bad, you can get around them in this case by setting the `` fields to `display:block` [example](http://jsfiddle.net/pxfunc/LHmEE/2/) — MikeM, Aug 09 '11 at 14:22

Jason Gennaro · Answer 2 · 2011-08-09T14:18:46.813

Change this

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

to this

#content input
{
    display:inline;
    margin:1px 20px 1px 1px;
}

That is remove the float:left and replace with display:inline;.

Example: http://jsfiddle.net/jasongennaro/ptKEh/

EDIT

@mdmullinax pointed out that the question also requested the text be above the input field

Missed that ;-)

In that case, remove the display rules and use three brs

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

    <br />

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

Revised example: http://jsfiddle.net/jasongennaro/ptKEh/2/

the question also requested the text be above the input field — MikeM, Aug 09 '11 at 14:13

score 0 · Answer 3 · answered Aug 09 '11 at 14:09

I generally use tables for forms that are laid out like this. They are much easier to work with than CSS (IMO) and the structure is much more clear.

<table>
    <tr>
        <td>
            <label for="txt_RequestId">Request Id</label>
            <br /><input id="txt_RequestId" type="text" />
        </td>
        <td>
            <label for="txt_District">District</label>
            <br /><input id="txt_District" type="text" />
        </td>
    </tr>
</table>

CSS is very good for moving elements around with respect to their container. However when you want things to be positioned in a very regular way, dependent on other elements, it can really obfuscate the logic. <table>s are much more explicit about this.

CSS for Aligning TextBox and Label

3 Answers3

Linked