Tag Archives: form

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">
		<input type="text" name="txt_name" />
		<input type="text" name="txt_lastname" />
		<input type="submit" value="Send" />

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 {

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