Rob Murrer

Inline-Block vs Float for Vertical Alignment in Forms

This test examines the most consistent way to vertically align labels with input elements. The screen shots were done on Windows XP. Any feedback on this test would be appreciated.

Code

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div class="container">

    <form action=#" class="formstest">
      <fieldset class="inlineblockforms">
          <legend>display:inline-block;</legend>
          <ul>
            <li><label>test</label><input type="text"></li>
            <li><label>test</label><input type="text"></li>
          </ul>
      </fieldset>

      <fieldset class="floatforms">
          <legend>float:left;</legend>
          <ul>
            <li><label>test</label><input type="text"></li>
            <li><label>test</label><input type="text"></li>
          </ul>
      </fieldset>
    </form>

  </div><!-- container -->
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.formstest fieldset
            { width: 350px; margin-bottom: 21px; float:left; margin-right:21px; }
.formstest ul
            { padding: 21px 21px 0px 21px; }
.formstest li
            { list-style-type: none; background-color:#EEE; border: 1px solid #000; margin-bottom:21px;}
.formstest input
            { width: 200px; padding:5px; }
.formstest label
            { width:50px; padding:5px; }
.inlineblockforms label
            { display:inline-block; vertical-align:middle; }
.inlineblockforms input
            { display:inline-block; }
.floatforms li
            { overflow:hidden;  width:100% /* ie6 haslayout fix */;}
.floatforms label, .floatforms input
            { display:inline; float:left; }

Renderings

Internet Explorer 6

Float method looks superior. But float method needs width:100%; to fix a haslayout bug. inline-block method looks terrible (it looks fine if you eliminate padding on label and input though)

Internet Explorer 7

Float method looks superior. inline-block has an excessive amount of spacing above the label.

Internet Explorer 8

Float method looks superior. Nearly identical except for a small amount of spacing above label.

Firefox 3.5

The rendering seems to be identical. Although when I run Firefox on Ubuntu, inline-block method renders superior.

Safari 4

Float method looks superior. Nearly identical except for a small amount of spacing above label.

Conclusion

For the most consistent rendering, use the float method for vertical alignment of labels in forms.