Tag Archives: alignment

Form alignment without table

In this post I will give you a quick method to align the inputs of your forms with a couple of CSS lines. A couple years ago HTML tables were used to align elements, any changes about the forms were heavy.

First step the HTML code of your form:

<form action="#" method="post">
	<p>
		<label>Name:</label>
		<input type="text" name="txt_name" />
	</p>
	<p>
		<label>Lastname:</label>
		<input type="text" name="txt_lastname" />
	</p>
	<p>
		<input type="submit" value="Send" />
	</p>
</form>

Without CSS your form should be like this:

Now we will add some CSS. The trick is to make your labels floatting on the left and define a width. To make our labels floatting we also have to display them as blocks.

form p label {
	display:block;
	float:left;
	width:100px;
}

And there you go, it is as simple as that.