Sample Form

There are a few things going on here, but the important point is the layout of the form elements and labels.

The markup for a label/input pair is the following:

<div class="pair">
	<label for="fname">First Name*</label>
	<input type="text" name="firstname" id="fname" size="25" />
</div>

By default those will line up horizontally because they are inline objects (label, input) inside a block object. But what if we want the form fields to line up visually? What we can do is specify a width for the label elements so that all of the input elements start in the same position horizontally.

Since label is an inline element by default, in order for a width declaration to have any effect we must make it a block element.

form fieldset label {
	display: block;
	width: 28%;
}

A side effect of this however is that the label element, being a block element, is now going to force any sibling element to appear below it, regardless of width. One way around this is to float the label element to the left, I align the text to the right so that it forms a line with the input elements:

form fieldset label { 
	display: block;
	width: 28%;
	float: left;
	text-align: right;
}

The final declaration with a few more presentational rules looks like this:

form fieldset label { 
	font-weight: bold; 
	padding: 0 3px;
	display: block;
	float: left;
	width: 28%;
	text-align: right;
}

Next, we need to ensure that the next label/input pair stays below the previous one. We do that by clearing the floated label element. The clear is to the left side because we are floating the labels left and they would therefore always be on the left side of the container.

form fieldset div.pair {
	margin: 8px 0 3px 0;
	padding: 0;
	clear: left;
}

That handles most of the form elements, but what about the radio buttons. The radio buttons are different because as is very common, labels for radio buttons and check boxes should come after the form field, not before.

The solution to this is fairly simple. In the markup, we already have the radio button before its respective label, so they will naturally want to be in the order we want them in:

<div class="checkpair">
	<input type="radio" name="newsletter" id="newsyes" value="yes">
	<label for="newsyes">Yes</label>
</div>

The trick part is that the CSS declared above will want to float the label element to the left. We can override this behavior with a more specific selector:

form fieldset div.checkpair label {
	float: none;
	display: inline;
}

The above selector removes to left float from labels that are in a checkpair div only and resets them to display inline.

Finally, we add some padding to the left side of the divs containing the radio buttons so that visually they line up with the rest of the form elements:

form fieldset div.checkpair {
	padding-left: 120px;
}