Update 2021: This post is extremely out-dated. You might want to goole “CSS FlexBox” or “CSS Grid” instead of reading it ;)

Update: When I wrote this blog post, I confused “vertically” with “horizontally”. I hope you can forgive me. This is how you can really align divs vertically. This article shows you how to align form fields horizontally.

In the last few weeks I was doing a lot of HTML and CSS again (after working on a WPF right client application for 1 1/2 years). One of the first things I had to do was to design an input form where the form fields have labels and are horizontally aligned. Here is how I solved it.

First, change the box sizing to border-box. Because for me, CSS makes much more sense when box-sizing is border-box.

* { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Alright, now let’s align the form fiels. Here is the HTML form where the input fields should be horizontally aligned:

<form>
    <label>Radio Group:</label>
    <input type="radio"/> Option 1<br/>
    <input type="radio"/> Option 2<br/>
    
    <label>Some Input:</label>
    <input type="text"/><br/>

    <label>Another Input with a rather long caption:</label>
    <input type="text"/><br/>

    <input type="submit" value="submit"/>
</form>

The result looks quite ugly:

Option 1 Option 2

I started with this solution but I had to change it a bit. First, let’s create the CSS rule for labels from the linked blog post:

label {
    float: left;
    width: 150px;
    text-align: right;
    margin-right: 0.5em;
}

The result looks like this:

Option 1 Option 2

Well, still a little crappy. The text of the third label is way too long. Also, we need a rule for form fields without a label.

label {
    float: left;
    width: 150px;
    text-align: right;
    margin-right: 0.5em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}
.form-field-no-caption {
    margin-left: 150px;
    padding-left: 0.5em;
}

<form>
    <label>Radio Group:</label>
    <input type="radio"/> Option 1<br/>
    <span  class="form-field-no-caption"><input type="radio"/> Option 2</span><br/>
    
    <label>Some Input:</label>
    <input type="text"/><br/>

    <label>Another Input with a rather long caption:</label>
    <input type="text"/><br/>

    <span  class="form-field-no-caption"><input type="submit" value="submit"/></span>
</form>
Option 1 Option 2

And, of course, this also work when you specify a relative width for the labels:

label {
    float: left;
    width: 20%;
    text-align: right;
    margin-right: 0.5em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}
.form-field-no-caption {
    margin-left: 20%;
    padding-left: 0.5em;
}
Option 1 Option 2

Before I discovered the blog post linked at the top of this article I used tables for horizontally aligning form fields. But a table is a rather ugly workaround in this case - and most of the time it is not necessary. Horizontally aligning form fields is not that hard in CSS - at least when you can use a fixed width or a width relative to the parent container for the labels.

You might also be interested in...