Form css

[keyboard]

I have made a pretty basic form

<form method="post" action="contact.php">
<label for="name">Name:</label><input type="text" name="name" maxlenght="20"><br />
<label for="title">Title:</label><input type="text" name="title" maxlenght="20"><br /><br />
<label for="content">Message:</label> <br />
<textarea name="content" cols="40" rows="7"></textarea> <br />
<input type="submit" name="submit" value="submit">
</form>

and am using this css

label
{
width: 3em;
float: left;
text-align: right;
margin-right: 0.1em;
display: block
}

.submit input
{
margin-left: 4.5em;
}

It alligns the name and title but not the content box. I would like it to have them all lined up nicely. Any help?

[david_deseine]

Hi,
A good solution to manage your form layout is to make a class, for instance "myform" that way :

<form class="myform" method="post" action="contact.php">

css : /*change those values according to your needs*/

.myform 
{
	float: left; 
	clear: both;
}

.myform label 
{
width: 3em;
float: left;
text-align: right;
margin-right: 0.1em;
display: block
}

.myform input {
	width: 12em;
	margin-left: 1em;
	margin-bottom: 20px;
}

.myform textarea {
	width: 12em;
	margin-left: 1em;
	margin-bottom: 20px;
}

have fun !

[keyboard]

Thanks for your help. One more thing. How can I allign the submit button with the inputs.

.myform 
{
	float: left; 
	clear: both;
}

.myform label 
{
width: 6em;
float: left;
text-align: right;
margin-right: 0.1em;
display: block
}

.myform input {
	width: 12em;
	margin-left: 1em;
	margin-bottom: 20px;
}

.myform textarea {
	width: 15em;
	margin-left: 6em;
	margin-bottom: 20px;
}

[Deadweight]

where do you want to align them?

[keyboard]

The textbox and inputs are already alligned. I want to have the submit button the same distance from the left of the screen as the other inputs.

[david_deseine]

you have to add a class tou your submit button that way

<input class="mybutton" type="submit" name="submit" value="submit">

then add in css this for example :

.myform input.mybutton {
	width: 3em;
	margin-left: 1em;
	
	
}